整合RN

官方文档地址： Integration with Existing Apps - React Native
中文文档：React Native 中文网
React-Native 开源App项目：GitHub - ReactNativeNews/React-Native-Apps: Curated List of Open Source React Native Apps

安装准备

安装 npm 、node、cocoapod、xcode、android studio

安装方法

方法1：create-react-native-app

npm install -g create-react-native-app
create-react-native-app 项目名
cd 项目名
yarn start
用 expo App 扫描运行后的二维码可以直接运行

方法2：react-native init

react-native init 项目名
cd 项目名
react-navtive run-ios
react-navtive run-android

react-navtive run-ios 卡在 Running script 'Install Third Party'

• 原因: boost_1_63_0.tar.gz 下载失败
• 下载地址：Releases · react-native-community/boost-for-react-native · GitHub
• 把 boost_1_63_0.tar.gz 放入 ~/.rncache 文件夹，再次运行 react-navtive run-ios 即可

方法3：集成到已有iOS项目

按着文档做无法编译通过

• 在iOS项目中创建文件夹 ReactNative
• 在 ReactNative 文件夹新建 package.json，内容：

{
  "name": "TestOCRN",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "16.0.0",
    "react-native": "0.50.0"
  }
}

• 调用 npm install
• 创建 PodFile, pod init
• 在 PodFile 中写入下面的内容

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '8.0'
use_frameworks!

target 'TestOCRN' do
  pod 'React', 
  :path => './ReactNative/node_modules/react-native', 
  :subspecs => [
    'Core',
    'ART',
    'RCTActionSheet',
    'RCTGeolocation',
    'RCTImage',
    'RCTNetwork',
    'RCTPushNotification',
    'RCTSettings',
    'RCTText',
    'RCTVibration',
    'RCTWebSocket',
    'RCTLinkingIOS',
    'RCTAnimation',
  ]
  pod "yoga", :path => "./ReactNative/node_modules/react-native/ReactCommon/yoga"

end

• 运行 pod install
• 打开 TestOCRN.xcworkspace 运行

问题描述 ：‘fishhook/fishhook.h’ file not found

• 在package.json scripts 中添加
  "fishhookinstall": "sed -i '' 's#<fishhook/fishhook.h>#\"fishhook.h\"#g' ./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m",
• 运行: npm run fishhookinstall
• 返回 Podfile 目录 pod install

问题描述 ：'RCTAnimation/RCTValueAnimatedNode.h' file not found

• 在package.json scripts 中添加
  "nodeinstall": "sed -i '' 's\/#import <RCTAnimation\\/RCTValueAnimatedNode.h>\/#import \"RCTValueAnimatedNode.h\"\/' ./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h",
• 运行: npm run nodeinstall
• 返回 Podfile 目录 pod install

问题："_JSNoBytecodeFileFormatVersion", referenced from:

• 添加 BatchedBridge React subspec in Podfile

集成到已有的Android

• 按着文档做，可以完成