react nativeのApp統合と高度な適応

統合

既存のAppとの統合や、高度な適応の問題について、公式ドキュメントに説明されています.
既存のAppに統合することは、reactインタフェースを既存のAppのページに配置することにほかならない.最初のポイントはreact nativeを既存のプロジェクトに追加し、2番目のポイントはRCTRootViewを作成し、ページに追加することである.
react nativeは既存のプロジェクトに追加され、2つの方法があります.

1、  cocoapods，     ；
2、    ，  react native             ；

しかし、その前に、 react native という重要なことがあります.
react nativeはnodeを使用する.jsはエンジニアリング統合環境としてnpmツールを使用しているため、このステップも簡単です.

//   App       package.json  ，  npm install：
{
  "name": "reactDemo",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "^15.2.1",
    "react-native": "^0.29.2"
  }
}

現在のディレクトリにnode_が作成されます.modules,react nativeのすべての依存項目がこのディレクトリに存在します.
cocoapods統合を使用すると便利です.

//  podfile，       ，  :path        node_modules    

target 'App    ' do

  pod 'React', :path => './node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTWebSocket', # needed for debugging
    # Add any other subspecs you want to use in your project
    'RCTImage',
    'RCTNetwork',
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTLinkingIOS',
    'RCTVibration',
    'RCTSettings',
  ]

end

: pod install， react native 。
手動でreact nativeを追加するには、ちょっとお手数ですが、node_に入ります.modulesディレクトリは、対応するreactプロジェクト、すなわちprojectを検索し、projectを既存のプロジェクトに追加すればよい.
次にreactページを作成し、既存のプロジェクトにサブページとして追加します.

    NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];

    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
    
    _rctView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation moduleName:@"reactDemo" initialProperties:@{} launchOptions:nil];
    
    [self.view addSubview: _rctView];

ここまで来ると、全体的な統合が完了し、サービスを開始してページが正常に表示されるかどうかを見ることができます.

react高度適応

reactページの高さは不定であり、reactページの親ページ設定に問題があります.公式には、親ページがUIscrollViewを使用し、reactページの高さの変化を傍受し、親ページがreactページの変化に伴って変化するソリューションも提供されています.
RCTRootViewの高さの変化を監視する設定:

    _rctView.delegate = self;
    _rctView.sizeFlexibility = RCTRootViewSizeFlexibilityHeight;

#pragma mark - RCTRootViewDelegate
- (void)rootViewDidChangeIntrinsicSize:(RCTRootView *)rootView {

    CGRect newFrame = rootView.frame;
    newFrame.size = rootView.intrinsicSize;
    
    rootView.frame = newFrame;
    self.view.frame = newFrame;
    
    if (self.delegate) {
        [self.delegate didChangeHeight: newFrame.size.height];
    }
}    

OK、統合と高度な適応が完了しました.次に何か問題がありますか?

touchableとUIscrollViewイベントの競合問題

ここでいうイベント競合は、UIscroollViewがTouchableのクリックイベントをキャプチャしたということではなく、TouchableがUIscroollViewのスクロールイベントをクリックイベントと勘違いしているということです.そのため、UIscrollViewをスクロールすると、Touchableクリックイベントが同時に出発し、このような体験は悪くない.
react native自体もScrollViewをカプセル化しており、react nativeのScrollViewを使用する場合にはこの問題は存在せず、明らかにreact nativeがこの問題を発見し解決した.react nativeのクリックイベントはTouchableに依存しなければならないし、react nativeのScrollViewを使用することもできないので、この問題はフレームワークで解決することはできません.
解決方法:
Touchableはイベントシミュレーションのクリック操作に完全に依存しており,混乱の原因はUIscrollViewスクロール関連イベントがjs側のTouchableに伝達されているため,スクロール関連イベントをマスクするだけで目標を達成できる.
解決方法:
RCTRootViewはnativeとjs側の橋渡しであり、すべてのUIタッチイベントは、現在のタッチイベントをキャンセルするためのcancelTouchesメソッドがあるので、scrollViewWillBeginDraggingメソッドで[_rctView cancelTouches]を呼び出すだけでよい.

対話と拡張

react nativeをローカルプロジェクトに統合する以上、両者の間のインタラクションは必然的に存在する.react nativeコアテクノロジーはjavascriptCoreであり、インタラクションも必然的に通過します.WebViewとは異なり、javascriptCoreは独立して存在するプロジェクトであり、react native全体が個別のjscontextによって確立された連絡であり、WebViewの要求メッセージをキャプチャして通信することはできない.良いニュースは、古いWebView方式でも新しいjavascriptCore方式でも、カプセル化する必要もなく、古いjsbridgeインタフェースをreact nativeプロジェクトに移植することができます.
jsbridgeとjavascriptCoreについては、前の記事を参照してください.
H 5とnative間の通信
JAvascriptCoreの詳細
react nativeにどのように注入するかは、この記事を参照してください.
react nativeのOCとjsの相互作用
react nativeのWebViewにどのように注入するかは、この記事を参照してください.
react nativeのWebViewにjsインタフェースを注入
プロジェクトがreact nativeサーバアドレスを任意に交換できるようにするには、このツールを参照してください.
react-native-debug-server-host
注意:react nativeのjscontextはサブスレッドで実行を作成するので、インタフェースにUIの操作がある場合は、UIスレッドに手動で指定して実行する必要があります.