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文件里写一个基础的信息，到此项目运行成功

运行工程