ReactNative中如何写自定义模块

来源：动视网责编：小采时间：2020-11-27 15:31:24

ReactNative中如何写自定义模块

ReactNative中如何写自定义模块:前言在 React Native 项目中可以看到 node_modules 文件夹，这是存放 node 模块的地方，Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm，一般指两层含义：一是 Node.js 开放式模块登记和管理系统，另一种是 Node.js 默认的模块管理器

推荐度：

点击下载本文 文档为doc格式

导读ReactNative中如何写自定义模块:前言在 React Native 项目中可以看到 node_modules 文件夹，这是存放 node 模块的地方，Node.js 的包管理器 npm 是全球最大的开源库生态系统。提到npm，一般指两层含义：一是 Node.js 开放式模块登记和管理系统，另一种是 Node.js 默认的模块管理器

import {NativeModules, Platform, DeviceEventEmitter} from 'react-native';

// 通过 NativeModules 找到我们在 Native 定义的 JPushModule 类
const JPushModule = NativeModules.JPushModule;

export default class JPush {

 /**
 * Android only
 * 初始化JPush 必须先初始化才能执行其他操作
 */
 static initPush() {
 JPushModule.initPush();
 }
｝

上面定义了一个 initPush 方法，initPush 实际上调用了 JPushModule 中定义的 initPush 方法，其他方法与此类似，本质上都是通过 NativeModules 调用了 Native 提供的方法。
## 发布
到此为止，我们已经完成了 React Native 自定义模块。现在可以发布我们的自定义模块了。在 package.json 所在的目录下执行

npm publish

就可以把我们的自定义模块上传到 npm 库了。每次更新版本时，需要改动 package.json 中的 version 值，然后再执行 npm publish 即可。

使用

在 React Native 目录下，执行：

npm install my-react-library --save

安装完成后就会把这个模块保存到 node_modules 文件夹下，由于我们的模块是一个 Android Library 项目，所以在 Native 中还需要配置一下。主要是添加项目依赖：

someone's react-native project/some module/build.gradle

dependencies { 
 compile fileTree(dir: "libs", include: ["*.jar"]) 
 compile "com.android.support:appcompat-v7:23.0.1" 
 compile "com..react:react-native:+" // From node_modules 
 // 在 dependecies 中加入自定义模块 
 compile project(':my-react-library')
}

然后在 settings.gradle 中也要配置一下：

someone's react-native project/settings.gradle

include ':app', ':my-react-library'
project(':my-react-library').projectDir = new File(rootProject.projectDir, '../node_modules/my-react-library/android')

在 MainActivity 中将自定义的 Package 添加进去：

MainActivity.java

...
mReactInstanceManager = ReactInstanceManager.builder() 
.setApplication(getApplication()) 
.setBundleAssetName("index.android.bundle") 
.setJSMainModuleName("react-native-android/index.android") 
.addPackage(new MainReactPackage())
//添加自定义的 package
.addPackage(new MyReactPackage())
...

如果是 RN 0.29.0 以上版本，则应在 MainApplication 中添加：

MainApplication.java

@Overrideprotected List<ReactPackage> getPackages() { 
return Arrays.<ReactPackage>asList( 
 new MainReactPackage(), 
 new MyReactPackage() 
 );
}

到此为止我们完成了 Native 部分的配置（完成后 sync 一下），接下来就可以使用了。
别人要使用我们的模块时，就可以这样写：

someone.js

//这里的 'my-react-library'是在 package.json 定义的 name
// 这样就可以
import MyModule from 'my-react-library'

export default class SomeClass extends React.Component {
 componentDidMount() {
 // 调用 index.js 中定义的 doSomething()
 MyModule.doSomething();
 }
｝

ReactNative中如何写自定义模块

推荐度：

点击下载本文 文档为doc格式

标签：如何自定模块

热门焦点

ReactNative中如何写自定义模块

ReactNative中如何写自定义模块

使用

ReactNative中如何写自定义模块

最新推荐

猜你喜欢

热门推荐