React Native実行環境使用の概要

React Native実行環境使用の概要
React Native中国語学習資料、推奨使用:http://reactnative.cn.
使用中に遭遇した穴に基づいて、以下に小さな入門小結をします.
一、Reactの特徴

（1）     
（2）  ：   DOM   ，        DOM   。
（3）  ：               。
（4）JSX： js     ，     ，    。
（5）  ：    ，          ，               。
（6）        ：React           ，         ，                    。

二、設置配置
1、python 2.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();