ReactNative集成到原生项目

ReactNative集成到原生项目

1:在工程里创建一个ReactComponent文件夹，用来存放ReactNative相关的文件

2:ReactComponent文件夹里，存放以下文件

3：其中package.json文件是关于ReactNative的配置信息，最好自己init一个项目然后将项目中的信息复制过来
{
“name”: “ReactCaculator”,
“version”: “0.0.1”,
“private”: true,
“scripts”: {
“start”: “node node_modules/react-native/local-cli/cli.js start”,
“test”: “jest”
},
“dependencies”: {
“react”: “16.0.0-alpha.6”,
“react-native”: “0.44.2”
},
“devDependencies”: {
“babel-jest”: “20.0.3”,
“babel-preset-react-native”: “2.0.0”,
“jest”: “20.0.4”,
“react-test-renderer”: “16.0.0-alpha.6”
},
“jest”: {
“preset”: “react-native”
}
}

4：在cocoapods中导入ReactNativeSDK

取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。

请将:path后面的内容修改为正确的路径。

pod ‘Yoga’, :path => ‘./ReactComponent/node_modules/react-native/ReactCommon/yoga’
pod ‘React’, :path => ‘./ReactComponent/node_modules/react-native’, :subspecs => [
‘Core’,
‘ART’,
‘RCTActionSheet’,
‘RCTAdSupport’,
‘RCTGeolocation’,
‘RCTImage’,
‘RCTNetwork’,
‘RCTPushNotification’,
‘RCTSettings’,
‘RCTText’,
‘RCTVibration’,
‘RCTWebSocket’,
‘RCTLinkingIOS’,
]

、

然后执行pod install。注意，path的路径一定要设置正确

安装成功。
5：开启ReactNative服务，首先进入到package.json同路径的文件夹下，
执行react-native start
接着执行npm start
接着创建ReactViewController承载RCTRootView

url记得替换为你电脑的IP地址。

index.ios.js文件里写一个基础的信息，到此项目运行成功

运行工程