react native 学习笔记----将react native嵌入到Android原生应用 - CSDN博客
react native 学习笔记----将react native嵌入到Android原生应用
不仅可以在react native 的js界面和现有工程的界面之间跳转，而且可以把js写的界面当成一个控件，嵌入到现有的activity，作为原生界面的一部分使用。
第一节：按照官方的例子，把js写页面放在一个activity，在原生应用里启动该activity。
开始之前，你要搭好react native开发Android环境，我是在mac上搭建的IDE，具体参看我前面的blog。本文以一个hello world为例。
第一步：先在Android studio中建立Hello
world程序。
第二步：进入你工程的根目录，在命令行运行下面的命令：
$ npm init &
这个命令会创建package.json文件，输入这个命令后，会提示你输入一系列参数。按照提示输入：我输入的
参数如下：
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.
See `npm help json` for definitive documentation on these fields
and exactly what they do.
Use `npm install &pkg& --save` afterwards to install a package and
save it as a dependency in the package.json file.
Press ^C at any time to quit.
name: (myAppWithTest) integrate &// 输入项目名称
version: (1.0.0) // 回车，使用默认版本号
description: test native for react // 输入项目描述
entry point: (index.js) // 回车，使用默认文件名
test command: & & // 回车，使用默认值
git repository: // 回车留空或填入Git地址
keywords: react test // 填写关键字react和test
author: andy // 填写作者
license: (ISC) // 回车，使用默认值
上面填完后，再输入下面的命令：
$ npm install --save react&react-native
$ curl -o .flowconfig /facebook/react-native/master/.flowconfig
上面的命令执行后，会创建node_modules目录。
第三步：打开在根目录下刚才创建好的package.json文件，添加下面一行
&start&: &node node_modules/react-native/local-cli/cli.js start&
第四步：编辑index.android.js文件，加入简单的代码，你可以copy下面的代码到该文件：
'use strict';
import React from 'react';
& AppRegistry,
& StyleSheet,
} from 'react-native';
class HelloWorld ponent {
& render() {
& & return (
& & & &View style={styles.container}&
& & & & &Text style={styles.hello}&Hello, Andy&/Text&
& & & &/View&
var styles = StyleSheet.create({
& container: {
& & flex: 1,
& & justifyContent: 'center',
& hello: {
& & fontSize: 20,
& & textAlign: 'center',
& & margin: 10,
AppRegistry.registerComponent('HelloWorld', () =& HelloWorld);
第五步：在你app的build.gradle文件中添加react native依赖库
compile &com.facebook.react:react-native:+& &// From node_modules
第六步：在你project的 build.gradle文件中添加 react native路径：
allprojects {
& & repositories {
& & & & ...
& & & & maven {
& & & & & & // All of React Native (JS, Android binaries) is installed from npm
& & & & & & url &$rootDir/node_modules/react-native/android&
第七步：在你的AndroidManifest.xml文件中添加网络权限
&uses-permission android:name=&android.permission.INTERNET& /&
第八步：创建一个加载JS代码的activity，activity的代码如下：
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
& & private ReactRootView mReactRootV
& & private ReactInstanceManager mReactInstanceM
& & @Override
& & protected void onCreate(Bundle savedInstanceState) {
& & & & super.onCreate(savedInstanceState);
& & & & mReactRootView = new ReactRootView(this);
& & & & mReactInstanceManager = ReactInstanceManager.builder()
& & & & & & & & .setApplication(getApplication())
& & & & & & & & .setBundleAssetName(&index.android.bundle&)
& & & & & & & & .setJSMainModuleName(&index.android&)
& & & & & & & & .addPackage(new MainReactPackage())
& & & & & & & & .setUseDeveloperSupport(BuildConfig.DEBUG)
& & & & & & & & .setInitialLifecycleState(LifecycleState.RESUMED)
& & & & & & & & .build();
& & & & mReactRootView.startReactApplication(mReactInstanceManager, &HelloWorld&, null);
& & & & setContentView(mReactRootView);
& & @Override
& & public void invokeDefaultOnBackPressed() {
& & & & super.onBackPressed();
第九步：在AndroidManifest.xml文件中，为刚才创建的activity指定一个主题，
&&activity
& &android:name=&.MyReactActivity&
& &android:label=&@string/app_name&
& &android:theme=&@style/Theme.AppCompat.Light.NoActionBar&&
&&/activity&
第十步：添加一些activity的生命周期函数，并添加一些代码：
protected void onPause() {
& & super.onPause();
& & if (mReactInstanceManager != null) {
& & & & mReactInstanceManager.onHostPause();
protected void onResume() {
& & super.onResume();
& & if (mReactInstanceManager != null) {
& & & & mReactInstanceManager.onHostResume(this, this);
protected void onDestroy() {
& & super.onDestroy();
& & if (mReactInstanceManager != null) {
& & & & mReactInstanceManager.onHostDestroy();
&public void onBackPressed() {
& & if (mReactInstanceManager != null) {
& & & & mReactInstanceManager.onBackPressed();
& & } else {
& & & & super.onBackPressed();
第十一步：在MyReactActivity中添加按键响应函数：
public boolean onKeyUp(int keyCode, KeyEvent event) {
& & if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {
& & & & mReactInstanceManager.showDevOptionsDialog();
& & return super.onKeyUp(keyCode, event);
第十二步：在hello world程序的界面上添加一个按钮，加载MyReactActivity。
Button bt = (Button)findViewById(R.id.start_react);
bt.setOnClickListener(new View.OnClickListener() {
public void onClick(View view) {
Intent intent = new Intent(MainActivity.this,MyReactActivity.class);
startActivity(intent);
第十三步：到这里基本可以在android studio中运行程序了，先在命令行启动js所需的服务器，执行下面的命令即可：
$ npm start
最后，在android studio，像启动其他程序一样运行程序，点击按钮就可以加载react native界面了。激动吧。如下图：
第二节：将react native 写的界面当成组建嵌入到现有的activity。
&这个其实比较简单，新建一个布局xml文件，在上面的创建的MyReactActivity的onCreate函数中，像原生一样调用setContentView(R.layout.native_js); 然后通过addView 把reactnative 的界面，加入进入。下面是完整的onCreate函数代码：
public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
& & private ReactRootView mReactRootV
& & private ReactInstanceManager mReactInstanceM
& & @Override
& & protected void onCreate(Bundle savedInstanceState) {
& & & & super.onCreate(savedInstanceState);
& & & & setContentView(R.layout.native_js);
& & & & mReactRootView = new ReactRootView(this);
& & & & mReactInstanceManager = ReactInstanceManager.builder()
& & & & & & & & .setApplication(getApplication())
& & & & & & & & .setBundleAssetName(&index.android.bundle&)
& & & & & & & & .setJSMainModuleName(&index.android&)
& & & & & & & & .addPackage(new MainReactPackage())
& & & & & & & & .setUseDeveloperSupport(BuildConfig.DEBUG)
& & & & & & & & .setInitialLifecycleState(LifecycleState.RESUMED)
& & & & & & & & .build();
& & & & mReactRootView.startReactApplication(mReactInstanceManager, &HelloWorld&, null);
& & & & LinearLayout view = (LinearLayout) findViewById(R.id.react_root);
& & & & view.addView(mReactRootView);
编译运行，如下图，灰色是原声界面部分，蓝色为react native界面：
问题：今天【】将react native嵌入到原生应用后，运行碰到下面的错误。
解决办法：我另外用命令react-native init &test.新建了一个应用，然后把新工程node_modules目录下的react目录copy到了对应的位置。
本文已收录于以下专栏：
相关文章推荐
{CSDN:CODE:2015880}上面就是我们创建工程成功之后的index.android.js文件
import React, { Component } from 'react';
如何把react-native集成到已经存在的Android studio工程中
这部分主要参考官方文档：https://facebook.github.io/react-native/docs...
参考：/docs/0.42/integration-with-existing-apps.html#content
文件目录：
本文跳过了React-Native 的通讯过程，详细请参考大头鬼写的Java和JS的通讯原理，虽然0.33版本加入了懒加载，原来配置表生成的时机和方式发生了改变,但是原理还是没有改变：通过约定的JSO...
一、网上搜集RNandroid的问题
版本更新太快，到现在还没有到达版本1.0，技术并没有那么稳定
使用了RN，就意味着和Google的android开发控件走上了两条不一样的路线。
二、目前存在的问...
1、准备工作：
①首先搭建React Native环境，http://facebook.github.io/react-native/docs/getting-started.html
②用真机运行（...
开发环境准备首先按照开发环境搭建教程来安装React Native在安卓平台上所需的一切依赖软件（比如npm）。在应用中添加JS代码在项目的根目录中运
React Native学习笔记之–向原生应用中集成RN页面
根据在官方文档的学习要向已有的原生项目中添加RN组件最重要的就是以下几步：
1.Understand what React N...
参考文档官方版：Native UI Components
中文版：原生UI组件
上面的文档介绍了facebook 开发小组，如何封装原生组件ImageView给js调用，但是没有具体的实例，按照上面的...
他的最新文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)React Native 植入原生应用_IOS开发-织梦者
当前位置:&>&&>& > React Native 植入原生应用
React Native 植入原生应用
React Native 植入原生应用
React Native 植入原生应用 官方文档中文版要是按照文档没有错误的话，就不用看下面的了。。。新建本地iOS Project(有的话就不用了)（跟文档一样）
新建Podfile文件，在.xcodeproj文件的路径下，引入React需要的依赖文件，然后再写点东西（跟文档一样）
path 这个路径是你的js的文件夹的路径，主要是为了找到node_modules/react-native这个文件夹目录，按照自己的实际project来
pod 'React', :path =& ‘../RN/node_modules/react-native', :subspecs =& [
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
新建一个package.json文件(如果js和本地project是分开的两个文件夹，把package.json放在js那个文件夹里，不是分开的就放在根目录就行)(我按照文档植入的时候，会有提示说找不到package.json文件，所以就新建了一个)
&name&: &YOUR_PROJECT_NAME&,
&version&: &0.0.1&,
&private&: true,
&scripts&: {
&start&: &node ../RN/node_modules/react-native/local-cli/cli.js start& # &自己的node_modules/react-native/local-cli/cli.js 地址&
&dependencies&: {
&react&: &^15.1.0&, # 换成自己的版本号
&react-native&: &^0.27.2& # 换成自己的版本号
在package.json文件的目录下，执行npm install react-native --save生成node_modules文件夹，如果提示react-native@0.27.2 requires a peer of react@15.1.0 but none was installed.，看一下文件夹的目录，有没有react这个文件夹，没有的话再执行npm
install react --save，有的话就不需要了
新建index.ios.js文件，写点东西（跟文档一样）
在js文件夹的目录下执行cd node_modules/react-native/进入该文件夹
执行npm run start -- --root &package.json文件所在的路径&
Run Project ，OK 了。。
以上就是React Native 植入原生应用的全文介绍,希望对您学习和使用ios应用开发有所帮助.
这些内容可能对你也有帮助
更多可查看IOS开发列表页。
猜您也会喜欢这些文章react native （五）嵌入到原生应用
今天一天算是只研究了这部分，现在把不用终端 react native init命令创建工程，直接在现有的工程上嵌入react native，现将步骤归结如下：
1.先建一个空文件夹实际上（命名我都和现有xcode工程名相同）然后把你工程的文件夹拽入该文件夹中，并将工程文件夹改为ios（目的和官方文档上一直，我感觉这样也不容易出错）如图：
现在把你的工程cocopops管理（cocopops安装就滤过啦） ，因为后面要用它来加载库
2.现在工程添加好，开始创建package.json文件
这个简单，创建一个空的json文件，然后将下面一段代码复制到里面
“name”: “realNameAction”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”
“dependencies”: {
“react”: “15.0.2”,
“react-native”: “0.38.0”
将上面的name改为你的项目名称,react-native改为你当前的react native版本（打开你当时 react native init命令创建的工程的package.json文件就一目了然啦，改改的就改好啦，这样也是确保不出错嘛），将package.json文件放到根目录下面。
3.安装依赖包
打开的你终端切到你的根目录文件夹（cd /Users/sich/realNameAction ）然后
$ npm install
等个几十秒，可以看到在根目录下多了一个文件夹，走到这步可以看到目录是这样的啦。
4.Podfile文件
target ‘realNameAction’ do
pod ‘React’, :path =& ‘../node_modules/react-native’, :subspecs =& [
‘RCTText’,
‘RCTNetwork’,
‘RCTWebSocket’,
注意改为您的工程名字，注意如果你上一步完成的node_modules没在你的根目录下面
，上面的:path =& ‘../node_modules/react-native’需要你调整为自己的路径
最后把Podfile文件安装上就好啦。
5.走到这一步，恭喜您已经配置好，接下来就是index.ios.js了，还是放到根目录下面
终端切到根目录下面，然后
touch index.ios.js
这样就创建了一个空的index.ios.js文件
这样所有的文件就创建好啦，嘿嘿
6.编写您的js代码，你可以先用官网的代码测试一下效果，现将官网的代码粘贴下面
‘use strict’;
import React from ‘react’;
AppRegistry,
StyleSheet,
} from ‘react-native’;
class realNameAction ponent {
render() {
var contents = this.props[“scores”].map(
score =& {score.name}:{score.value}{“\n”}
2048 High Scores!
{contents}
const styles = StyleSheet.create({
container: {
justifyContent: ‘center’,
alignItems: ‘center’,
backgroundColor: ‘#FFFFFF’,
highScoresTitle: {
fontSize: 20,
textAlign: ‘center’,
margin: 10,
textAlign: ‘center’,
color: ‘#333333’,
marginBottom: 5,
// 整体js模块的名称
AppRegistry.registerComponent(‘realNameAction’, () =& realNameAction);
realNameAction要改为你自己的Xcode工程名哦。
7.嵌入xcode项目中。
打开xcode项目，在你需要加载js的地方写入以下代码：
NSURL *jsCodeLocation = [NSURL
URLWithString:@”“];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName
: @”realNameAction”
initialProperties :
@”scores” : @[
@”name” : @”Alex”,
@”value”: @”42”
@”name” : @”Joel”,
@”value”: @”10”
launchOptions
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootV
[self presentViewController:vc animated:YES completion:nil];
注意加上头文件
import “RCTRootView.h”
其中8081是默认的端口号，localhost是指您的电脑，可以用你电脑的IP（不知道为什么在我测试的时候用localhost，一直报没法访问到服务器，而换为电脑IP地址就好啦）。
8.运行测试
首先要启动终端（貌似就是创建了一个服务器 ，我也不知道这样理解对不对）
首先切到node_modules目录（我的：cd /Users/sich/realNameAction/node_modules）
然后运行：
$ npm start
这样就可以看到启动了，其中也可以看到端口默认的为8081，其中运行xcode模拟器，默认的是iPhone6，注意在整个测试过程中，该终端不要关闭。运行在模拟器上可以看到效果，在修改js后可以直接common+R刷新模拟器，后common+D然后Reload。
真机测试：真机测试要保证你的手机与电脑在同一网络，并设置端口号为8081：
设置—》无线局域网—》选中要连接的网络进入，下面HTTP代理处选择手动，服务器是你连接的电脑的IP，端口默认的8081，这样就OK啦。
看过本文的人也看了：
我要留言技术领域：
取消收藏确定要取消收藏吗？
删除图谱提示你保存在该图谱下的知识内容也会被删除，建议你先将内容移到其他图谱中。你确定要删除知识图谱及其内容吗？
删除节点提示无法删除该知识节点，因该节点下仍保存有相关知识内容！
删除节点提示你确定要删除该知识节点吗？ReactNative之原生模块开发并发布--iOS篇
招聘信息：
前段时间做了个ReactNative的App，发现ReactNative中不少组件并不存在，所以还是需要自己对原生模块进行编写让JS调用，正是因为在这个编写过程中遇到不少问题，发觉了官网文档中许多的不足。所以产生了写一个实践教程的想法，最终有了这么一篇文章。整篇文章主要以编写一个原生模块为例子，来讲述了我们在编写原生模块所用到的一些知识，并且在整个例子中，配有了完整的实践代码，方便大家理解并调试。除了这些内容，文章还讲述了我们如何将自己编写的原生模块发布到npm上分享给别人使用。希望能够给大家带来帮助，也希望大家将自己编写的原生模块分享出来。示例代码github地址：准备工作：创建ReactNative工程我们需要先创建一个ReactNative工程，使用如下命令创建。react&native&init&TestProject创建好工程之后，我们使用xcode打开TestProject/ios/下的iOS工程。创建静态库，并将这个静态库手动链接到工程中首先，我们在前面创建的ReactNative工程下的node_modules创建一个文件夹react-native-BGNativeModuleExample，然后我们在新创建的文件夹下再创建一个ios文件夹。$&cd&TestProject/node_modules
$&mkdir&react-native-BGNativeModuleExample
$&cd&react-native-BGNativeModuleExample
$&mkdir&ios然后，由于ReactNative的组件都是一个个静态库，我们发布到npm给别人使用的话，也需要建立静态库。我们使用Xcode建立静态库，取名为BGNativeModuleExample。建立之后，我们将创建的静态库中的文件全部copy到node_modules/react-native-BGNativeModuleExample/ios目录下。iOS文件目录如下：|____BGNativeModuleExample
|&|____BGNativeModuleExample.h
|&|____BGNativeModuleExample.m
|____BGNativeModuleExample.xcodeproj最后，我们需要手动将这个静态库链接到工程中。1、使用xcode打开创建的静态库，添加一行Header Search Paths，值为$(SRCROOT)/../../react-native/React，并设置为recursive。2、将BGNativeModuleExample静态库工程拖动到工程中的Library中。&3、选中 TARGETS => TestProject => Build Settings => Link Binary With Libraries，添加libBGNativeModuleExample.a这个静态库&到此，我们准备工作完成了。我们这里这么准备是有用意的，那就是模拟npm链接的过程，建立好了环境，避免了发布到npm上后别人使用找不到静态库的问题。一、编写原生模块代码1、创建原生模块选中我们创建的BGNativeModuleExample静态库，然后在BGNativeModuleExample.h文件中导入RCTBridgeModule.h，让BGNativeModuleExample类遵循RCTBridgeModule协议。//BGNativeModuleExample.h文件的内容如下
#import&#import&"RCTBridgeModule.h"
@interface&BGNativeModuleExample&:&NSObject&@end在BGNativeModuleExample.m文件中，我们需要实现RCTBridgeModule协议。为了实现RCTBridgeModule协议，我们的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在Javascript中访问这个模块的名字。如果不指定，默认会使用这个类的名字。在这里，我们指定了模块的名字为BGNativeModuleExample。RCT_EXPORT_MODULE(BGNativeModuleExample);实现了RCTBridgeModule协议之后，我们就可以在js中如下获取到我们创建的原生模块。import&{&NativeModules&}&from&'react-native';
var&BGNativeModuleExample&=&NativeModules.BGNativeModuleE需要注意的是，RCT_EXPORT_MODULE宏传递的参数不能是OC中的字符串。如果传递@“BGNativeModuleExample"，那么我们导出给JS的模块名字其实是@"BGNativeModuleExample"，使用BGNativeModuleExample就找不到了。在这里，我们其实可以通过打印NativeModules来查找到我们创建的原生模块。2、为原生模块添加方法我们需要明确的声明要给JS导出的方法，否则ReactNative不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现：RCT_EXPORT_METHOD(testPrint:(NSString&*)name&info:(NSDictionary&*)info)&{
&&RCTLogInfo(@"%@:&%@",&name,&info);
}在JS中，我们可以这样调用这个方法：BGNativeModuleExample.testPrint("Jack",&{
&&height:&'1.78m',
&&weight:&'7kg'
});3、参数类型RCT_EXPORT_METHOD()支持所有标准的JSON类型，包括：string (NSString)number (NSInteger, float, double, CGFloat, NSNumber)boolean (BOOL, NSNumber)array (NSArray) 包含本列表中任意类型map (NSDictionary) 包含string类型的键和本列表中任意类型的值function (RCTResponseSenderBlock)除此以外，任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。了解更多请点击。4、回调函数警告：本章节内容目前还处在实验阶段，因为我们还并没有太多的实践经验来处理回调函数。回调函数，在官方的文档中是有上面的一个警告，不过在使用过程暂时未发现问题。在OC中，我们添加一个getNativeClass方法，将当前模块的类名回调给JS。RCT_EXPORT_METHOD(getNativeClass:(RCTResponseSenderBlock)callback)&{
&&callback(@[NSStringFromClass([self&class])]);
}在JS中，我们通过以下方式获取到原生模块的类名BGNativeModuleExample.getNativeClass(name&=>&{
&&console.log("nativeClass:&",&name);
});原生模块通常只应调用回调函数一次。但是，它们可以保存callback并在将来调用。这在封装那些通过“委托函数”来获得返回值的iOS API时最常见。5、Promises原生模块还可以使用promise来简化代码，搭配ES2016(ES7)标准的async/await语法则效果更佳。如果桥接原生方法的最后两个参数是RCTPromiseResolveBlock和RCTPromiseRejectBlock，则对应的JS方法就会返回一个Promise对象。我们通过Promises来实现原生模块是否会响应方法，响应则返回YES，不响应则返回一个错误信息，代码如下：RCT_REMAP_METHOD(testRespondMethod,
&&&&&&&&&&&&&&&&&name:(NSString&*)name
&&&&&&&&&&&&&&&&&resolver:(RCTPromiseResolveBlock)resolve
&&&&&&&&&&&&&&&&&rejecter:(RCTPromiseRejectBlock)reject)&{
&&if([self&respondsToSelector:NSSelectorFromString(name)])&{
&&&&resolve(@YES);
&&&&reject(@"-1001",&@"not&respond&this&method",&nil);
}在JS中，我们有两种方式调用，第一种是通过then....catch的方式：BGNativeModuleExample.testRespondMethod("dealloc")
&&&&.then(result&=>&{
&&&&&&console.log("result&is&",&result);
&&&&.catch(error&=>&{
&&&&&&console.log(error);
&&&&});第二种是通过try...catch来调用，与第一种相比，第二种会报警告”Possible Unhandled Promiss Rejection (id:0)“。async&testRespond()&{
&&var&result&=&BGNativeModuleExample.testRespondMethod("hell");
&&if(result)&{
&&&&console.log("respond&this&method");
}&catch&(e)&{
&&console.log(e);
&&}注意: 如果使用Promiss我们不需要参数，则在OC去掉name那一行就行了；如果需要多个参数，在name下面多加一行就行了，注意它们之间不需要添加逗号。6、多线程我们这里操作的模块没有涉及到UI，所以专门建立一个串行的队列给它使用，如下：return&dispatch_queue_create("com.liuchungui.demo",&DISPATCH_QUEUE_SERIAL);注意: 在模块之间共享分发队列&methodQueue方法会在模块被初始化的时候被执行一次，然后会被React Native的桥接机制保存下来，所以你不需要自己保存队列的引用，除非你希望在模块的其它地方使用它。但是，如果你希望在若干个模块中共享同一个队列，则需要自己保存并返回相同的队列实例；仅仅是返回相同名字的队列是不行的。更多线程的操作细节可以参考：7、导出常量原生模块可以导出一些常量，这些常量在JavaScript端随时都可以访问。用这种方法来传递一些静态数据，可以避免通过bridge进行一次来回交互。OC中，我们实现constantsToExport方法，如下：-&(NSDictionary&*)constantsToExport&{
&&return&@{&@"BGModuleName"&:&@"BGNativeModuleExample",
&&&&&&&&&&&&TestEventName:&TestEventName
&&&&&&&&&&&&};
}JS中，我们打印一下这个常量console.log("BGModuleName&value&is&",&BGNativeModuleExample.BGModuleName);但是注意这个常量仅仅在初始化的时候导出了一次，所以即使你在运行期间改变constantToExport返回的值，也不会影响到JavaScript环境下所得到的结果。8、给JS发送事件即使没有被JS调用，本地模块也可以给JS发送事件通知。最直接的方式是使用eventDispatcher。在这里，我们为了能够接收到事件，我们开一个定时器，每一秒发送一次事件。#import&"BGNativeModuleExample.h"
#import&"RCTEventDispatcher.h"
@implementation&BGNativeModuleExample
@synthesize&bridge&=&_
-&(instancetype)init&{
&&if(self&=&[super&init])&{
&&&&[NSTimer&scheduledTimerWithTimeInterval:1.0&target:self&selector:@selector(sendEventToJS)&userInfo:nil&repeats:YES];
-&(void)receiveNotification:(NSNotification&*)notification&{
&&[self.bridge.eventDispatcher&sendAppEventWithName:TestEventName&body:@{@"name":&@"Jack"}];
@end在JS中，我们这样接收事件NativeAppEventEmitter.addListener(BGNativeModuleExample.TestEventName,&info&=>&{
&&&&&&console.log(info);
&&&&});注意： 编写OC代码时，需要添加@synthesize bridge = _，否则接收事件的时候就会报Exception -[BGNativeModuleExample brige]; unrecognized selector sent to instance的错误。上面原生代码就编写好了，主要以代码实践为主，弥补官方文档中的一些不足，如果要需要了解更多的原生模块封装的知识，可以参考原生模块，也可以参考官方的源代码。二、发布上线我们按照上面步骤编写好原生模块之后，接下来将我们写的原生模块发布到npm。1、我们需要创建github仓库在github上创建一个仓库react-native-BGNativeModuleExample，然后关联到我们前面创建的react-native-BGNativeModuleExample目录$&cd&TestProject/node_modules/react-native-BGNativeModuleExample
$&git&init&.
$&git&remote&add&origin&/liuchungui/react-native-BGNativeModuleExample.git2、我们需要创建原生模块的入口文件我们需要在react-native-BGNativeModuleExample目录下创建一个index.js，它是整个原生模块的入口，我们这里只是将原生进行导出。//index.js
import&React,&{&NativeModules&}&from&'react-native';
module.exports&=&NativeModules.BGNativeModuleE3、发布到npm在发布到npm之前，我们需要创建一个package.json文件，这个文件包含了module的所有信息，比如名称、版本、描述、依赖、作者、license等。 我们在react-native-BGNativeModuleExample根目录下使用npm init命令来创建package.json，系统会提示我们输入所需的信息，不想输入的直接按下Enter跳过。$&npm&init
This&utility&will&walk&you&through&creating&a&package.json&file.
It&only&covers&the&most&common&items,&and&tries&to&guess&sensible&defaults.
See&`npm&help&json`&for&definitive&documentation&on&these&fields
and&exactly&what&they&do.
Use&`npm&install&&--save`&afterwards&to&install&a&package&and
save&it&as&a&dependency&in&the&package.json&file.
Press&^C&at&any&time&to&quit.
name:&(react-native-BGNativeModuleExample)输入完成之后，系统会要我们确认文件的内容是否有误，如果没有问题直接输入yes，那么package.json就创建好了。 我这里创建的package.json文件如下：{
&&"name":&"react-native-nativemodule-example",
&&"version":&"1.0.0",
&&"description":&"",
&&"main":&"index.js",
&&"scripts":&{
&&&&"test":&"echo&\"Error:&no&test&specified\"&&&&exit&1"
&&"repository":&{
&&&&"type":&"git",
&&&&"url":&"git+/liuchungui/react-native-BGNativeModuleExample.git"
&&"author":&"",
&&"license":&"ISC",
&&"bugs":&{
&&&&"url":&"/liuchungui/react-native-BGNativeModuleExample/issues"
&&"homepage":&"/liuchungui/react-native-BGNativeModuleExample#readme"
}如果我们编写的原生模块依赖于其他的原生模块，我们需要在package.json添加依赖关系，我们这里由于没有相关依赖，所以不需要添加："dependencies":&{
}初始化完package.json，我们就可以发布到npm上面了。如果没有npm的账号，我们需要注册一个账号，这个账号会被添加到npm本地的配置中，用来发布module用。$&npm&adduser
Username:&your&name
Password:&your&password
Email:&成功之后，npm会把认证信息存储在~/.npmrc中，并且可以通过以下命令查看npm当前使用的用户：$&npm&whoami以上完成之后，我们就可以进行发布了。$npm&publish
+&react-native-nativemodule-example@1.0.0到这里，我们已经成功把module发布到了npmjs.org。当然，我们也别忘记将我们的代码发布到github。$&git&pull&origin&master
$&git&add&.
$&git&commit&-m&'add&Project'
$&git&push&origin&master有时候，有些文件没必要发布，例如Example文件，我们就可以通过.npmignore忽略它。例如我这里.npmignore文件内容如下：Example/
.gitignore
.idea这样的话，我们npm进行发布的时候，就不会将Example发布到npm上了。4、添加Example，测试是否可用，添加README我们在react-native-BGNativeModuleExample目录下创建一个Example的ReactNative工程，并且通过rnpm install react-native-nativemodule-example命令安装我们发布的react-native-nativemodule-example模块。$&rnpm&install&react-native-nativemodule-example
TestProject@0.0.1&/Users/user/github/TestProject
└──&react-native-nativemodule-example@1.0.0
rnpm-link&info&Linking&react-native-nativemodule-example&ios&dependency
rnpm-link&info&iOS&module&react-native-nativemodule-example&has&been&successfully&linked
rnpm-link&info&Module&react-native-nativemodule-example&has&been&successfully&installed&&&linked上面提示安装并且link成功，我们就可以在js中进行使用了。import&BGNativeModuleExample&from&'react-native-nativemodule-example';
BGNativeModuleExample.testPrint("Jack",&{
&&&&height:&'1.78m',
&&&&weight:&'7kg'
});5、我们在发布上线之后还需要编写README文件。README文件是非常重要的，如果没有README文件，别人看到我们的原生组件，根本就不知道我们这个组件是用来干啥的。所以，我们很有必要添加一个README文件，这个文件需要告诉别人我们这个原生组件是干什么的、如何安装、API、使用手册等等。6、原生模块升级，发布新版本当我们添加新代码或者修复bug后，需要发布新的版本，我们只需要修改package.json文件中的version的值就行了，然后使用npm publish进行发布。总结本篇文章主要分成两个部分，一是讲述了编写原生模块的知识，二是将我们编写的内容发布到npm上。参考
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量6265点击量4590点击量4565点击量3500点击量2909点击量2409点击量2381点击量2351点击量2333
&2016 Chukong Technologies,Inc.
京公网安备89