大綱

• 為什么需要 React Native Module
• 如何創(chuàng)建一個 React Native的模塊
• 編寫 Android Toast 功能模塊
• 如何調試 React Native 模塊---------官方文檔中未提及或者我沒有找到，這里是我自己探索的
• npm 發(fā)布一個 React Native 模塊（外鏈接）

為什么需要 React Native Module

各位使用 React Native 時候是否會有碰到僅用React Native 提供的現(xiàn)有API 無法實現(xiàn)的功能。如微信登錄、微信/支付寶支付，訪問App的數據庫SQLite，還有針對性能的提升等等。這些東西在使用React Native 現(xiàn)有的功能無法實現(xiàn)的時候，將需要開發(fā)React Native Moduel。當然也可以使用社區(qū)中第三方庫，這些三方庫也是 React Native Module 。

總之，React Native Module 是可以給JS層擴展一些新的功能，這些功能是現(xiàn)有React Native API無法實現(xiàn)的功能，需要與原生代碼進行交互的部分。

如何創(chuàng)建一個 React Native的模塊

通過官方文檔的查閱和學習，知道可以使用 react-native-create-library 這個庫來快速創(chuàng)建一個包含Android ，IOS，Windows 系統(tǒng)下的模塊，這個模塊并且可以直接使用react-native link 快速鏈接到現(xiàn)有的 React Native 的應用中。

下面將簡單介紹如何安裝使用 react-native-create-library。

• 安裝 react-native-create-library

# npm npm install -g react-native-create-library# yarn yarn add -g react-native-create-library

• 創(chuàng)建一個 React Native Module 模塊

# 這樣將創(chuàng)建一個具有 Android ios windows 3個模塊的 React Native Module react-native-create-library demo # 這樣將僅創(chuàng)建一個具有 Android ios 2個模塊的 React Native Module react-native-create-library demo --platforms android,ios

上面就是創(chuàng)建一個React Native Module 的簡單介紹，更多關于 react-native-create-library 的使用請移步GitHub官方倉庫。

編寫 Android Toast 功能模塊

這里是參考官網【Android 原生模塊】，可以點擊查看詳情，下面是簡單介紹。

• 所有的Android 原生模塊都是繼承于ReactContextBaseJavaModule類。
• ReactContextBaseJavaModule.getName 方法是將當前這個模塊暴露給JavaScript層的名字
• ReactContextBaseJavaModule.getContants 返回的Map對象，是暴露給JavaScript層的一些常量
• 在ReactContextBaseJavaModule類中使用 @ReactMethod 注解導出一個方法給JavaScript

// 這是上面幾個步驟的共同代碼// 這里定義一個類繼承 ReactContextBaseJavaModule public class RNToastModule extends ReactContextBaseJavaModule {private final ReactApplicationContext reactContext;public RNToastModule(ReactApplicationContext reactContext) {super(reactContext);this.reactContext = reactContext;}/*** 這里導出的字符串為當前模塊的 JS 名稱* 在js中獲取到當前模塊中如下獲取到當前模塊：* NativeModules.RNToast* NativeModules 為 import { NativeModules } from 'react-native'; 中的 NativeModules* @return*/@Overridepublic String getName() {return "RNToast";}/*** 這里返回的值會被JS模塊當做常量來使用* 使用方式為** NativeModules.RNToast.SHORT === Toast.LENGTH_SHORT* NativeModules.RNToast.LONG === Toast.LENGTH_LONG** @return*/@Nullable@Overridepublic Map<String, Object> getConstants() {final Map<String, Object> constants = new HashMap<>();constants.put("SHORT", Toast.LENGTH_SHORT);constants.put("LONG", Toast.LENGTH_LONG);return constants;}/*** 這里暴露一個方法給 React Native** 在JS中使用方式為：** NativeModules.RNToast.show(msg, duration); // duration 可以使用上面 getConstants 方法暴露出來的常量** @param msg* @param duration*/@ReactMethodpublic void show( String msg, int duration ){Toast.makeText(getReactApplicationContext(), msg, duration).show();} }

• 封裝一個JavaScript模塊

import { NativeModules } from "react-native"; // 下一句中的ToastExample即對應上文 // public String getName()中返回的字符串 export default NativeModules.RNToast;

經過上面幾個簡單的步驟就開發(fā)好了一個 React Native Module 模塊，但是這里有一個重要的問題，開發(fā)的React Native Module 不可能每個都像Toast這個模塊如此簡單，應該如何在開發(fā)的過程中調試是一個重要的問題，不可能每次都發(fā)布到npm上來進行調試，每次發(fā)布調試也將影響他人正常使用該模塊，而且也給開發(fā)帶來了非常多不必要的麻煩，因此需要一個非常有效的調試方式，接下來將介紹如何調試React Native 模塊。

如何調試 React Native 模塊

基本思路為：既然是要調試 React Native 模塊，就需要一個 React Native App，然后將自己寫的React Native Module模塊導入React Native App 中，并且啟動App，修改Module，再次安裝調試，這樣一系列的操作。具體步驟如下:

• 創(chuàng)建 React Native App

# 創(chuàng)建一個名為 toast_demo 的工程 react-native init toast_demo # 等待命令的執(zhí)行，執(zhí)行完后安裝依賴，啟動服務，安裝app到模擬器或者真機，這樣完成了一個react native app的創(chuàng)建

• 將 React Native Module 模塊導入現(xiàn)有的App

# 先在 toast 工程中, yarn link 命令可以將toast工程導入全局， # 在別的工程中使用yarn link react-native-toast 就可以使用當前的toast工程 # 為什么是 react-native-toast 而不是 toast，可以點開 toast > package.json文件 # 將會發(fā)現(xiàn) toast 工程的 name 是 react-native-toast, # 前綴 react-native 是由 react-native-create-library 加上的。 # 因此這里是 react-native-toast 而不是 toast。 yarn link# 在 toast_demo 工程中敲擊yarn link react-native-toast， # 再點開 toast_demo 工程下的node_modules 會發(fā)現(xiàn) react-native-toast被 # 加載到toast_demo/node_modules里面了 yarn link react-native-toast# react-native link 命令不用多說 react-native link react-native-toast

上面的事情都做完了你很開心的啟動你的工程，并安裝到手機上調試的時候會發(fā)現(xiàn)下面這個問題(unable to resolve module 'react-native-toast')

這個問題主要導致的原因是React Native工程不支持 symlinks。怎么解決這個問題呢？

這里使用 haul ， 這是一個用于開發(fā) React Native App 的命令行工具。它可以很好的使用 Webpack 生態(tài)，以及支持熱更新，不用每修改等待React Native 來重新編譯，當然它也支持 symlinks ，所以可以使用 haul 來解決上面遇到的這個問題，具體使用方式可以查看官方 GitHub倉庫，下面是簡單介紹：

# 安裝 haul yarn add --dev haul# 初始化 haul和安裝haul的依賴，但是npx 不會準確的安裝所有的依賴，因此在使用haul的時候可能會提示漏掉了某些庫， # 只要根據提示安裝完所有的依賴即可 yarn haul init # npm >= 5.2.0 : npx haul init # npm < 5.2.0 : npm install -g npx npx haul init# 然后啟動 haul 相關服務 yarn haul start --platform ios # Or: npx haul start --platform ios

我是使用 haul^1.0.0-rc.15 這個版本的 haul，會碰到這個issue中的問題，haul的作者有提供解決方案，修改haul.config.js 為一下內容。

import { createWebpackConfig } from "haul";export default {webpack: env => {const config = createWebpackConfig({entry: './index.js',})(env);config.module.rules.some(rule => {if (rule.test && rule.test.source.includes('js')) {rule.use = [{loader: require.resolve('babel-loader'),options: {presets: [['module:metro-react-native-babel-preset', { enableBabelRuntime: false }]],plugins: [require.resolve('haul/src/utils/fixRequireIssues')],},},];return true;}});return config;} };

然后重新啟動 haul， 將能夠正常的運行React Native App 了。

修改 Android Studio 中 react-native-toast 中的代碼將會直接映射到 toast 工程中，這是 symlinks 的功能，這個功能非常的方便調試和修改module。

（官方文檔中未提及調試這塊或者我沒有找到，這里是我自己探索的，有更好的方式請各位告知）

開發(fā)好一個module，希望別人可以使用或者自己在下次工程中使用，這該怎么辦呢？當然是將當前的react native module 發(fā)布到 npm 上，怎么發(fā)布請繼續(xù)往下看。

npm 發(fā)布一個 React Native 模塊（外鏈接）

這是其他博主寫的npm包的創(chuàng)建和發(fā)布流程，主要使用 npm publish來發(fā)布和更新一個npm包，發(fā)布的npm包他人將可以使用npm或者yarn 進行下載和安裝使用你寫的模塊。

以上就是開發(fā)一個 React Native Android Module 的過程，如果是IOS也可以類比這個流程來開發(fā)調試。

toast 工程樣例

toast_demo 工程樣例

【參考】

• Native Modules Setup
• React Native 中文官方文檔 Android 原生模塊
• React Native: npm link local dependency, unable to resolve module
• haul - Attempted to assign to readonly property

總結

以上是生活随笔為你收集整理的怎么安装aptdaemon模块_自己开发一个React Native 模块的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。