React Native 运行环境使用简介

React Native 运行环境使用简介

React Native中文学习资料，推荐使用：http://reactnative.cn。

根据在使用中碰到的坑，以下做个小小入门小结。

一、React 特点

（1）声明式设计
（2）高效：通过对DOM的模拟，最大限度的减少与DOM的交互。
（3）灵活：可以与已知的框架或库很好的配合。
（4）JSX：是js语法的扩展，不一定使用，但建议用。
（5）组件：构建组件，使代码更容易得到复用，能够很好地应用在大项目的开发中。
（6）单向响应的数据流：React实现了单向响应的数据流，从而减少了重复代码，这也是解释了它为什么比传统数据绑定更简单。

二、安装配置

1、python2.7：MAC下系统自带，Windows下需自行安装；

2、NodeJS环境安装；

3、Yarn、React Native的命令行工具安装；

npm install -g yarn react-native-cli

4、测试安装；

react-native init AwesomeProject
cd AwesomeProject
react-native run-android/run-ios

5、生成js文件命令：

react-native bundle --entry-file index.ios.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

6、启动命令：

reactive-native start

三、集成到现有工程

1、iOS工程：

1、Podfile中以subspec的形式填写所有你要集成的React Native的组件；
2、添加一个事件处理函数，用于创建一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的，而且它必须对应你在index.js中使用AppRegistry注册的模块名字。

2、Android工程：

1、  在build.gradle文件中添加com.facebook.react:react-native:+，以及一个指向node_nodules/目录中的react-native预编译库的maven路径。
2、创建一个React Native专属的Activity，在其中再创建ReactRootView

四、同原生的交互（以iOS为例）

1、通过实现RCTBridgeModule协议，原生可传递属性给JS；

2、JS调用原生方法

原生中声明方法：

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location date:(nonnull NSNumber *)secondsSinceUnixEpoch)
{
  NSDate *date = [RCTConvert NSDate:secondsSinceUnixEpoch];
}

JS中调用

import { NativeModules } from 'react-native';
var CalendarManager = NativeModules.CalendarManager;
CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey', date.getTime());

3、原生调用JS

原生中声明方法：

@implementation CalendarManager

RCT_EXPORT_MODULE();

- (NSArray<NSString *> *)supportedEvents
{
  return @[@"EventReminder"];
}

- (void)calendarEventReminderReceived:(NSNotification *)notification
{
  NSString *eventName = notification.userInfo[@"name"];
  [self sendEventWithName:@"EventReminder" body:@{@"name": eventName}];
}

@end

JS中调用

import { NativeEventEmitter, NativeModules } from 'react-native';
const { CalendarManager } = NativeModules;

const calendarManagerEmitter = new NativeEventEmitter(CalendarManager);

const subscription = calendarManagerEmitter.addListener(
  'EventReminder',
  (reminder) => console.log(reminder.name)
);

...
// 别忘了取消订阅，通常在componentWillUnmount生命周期方法中实现。
subscription.remove();

4、Promises

原生中声明方法：

RCT_REMAP_METHOD(findEvents,
                 resolver:(RCTPromiseResolveBlock)resolve
                 rejecter:(RCTPromiseRejectBlock)reject)
{
  NSArray *events = ...
  if (events) {
    resolve(events);
  } else {
    reject(error);
  }
}

JS中调用

async function updateEvents() {
  try {
    var events = await CalendarManager.findEvents();

    this.setState({ events });
  } catch (e) {
    console.error(e);
  }
}

updateEvents();