相比大多數(shù)開發(fā)者接觸react-native后都是將RN嵌入到現(xiàn)有原生應(yīng)用洼专，但是看了官網(wǎng)的流程很多人都不是很清晰粥喜，現(xiàn)在我把自己嵌入RN的過程在這里貼出來屑埋，同時幫助大家少走些彎路昌粤。
參考的官方文檔:http://reactnative.cn/docs/0.31/integration-with-existing-apps.html#create-an-event-path
1网梢、創(chuàng)建package.json文件
執(zhí)行vim 或者touch命令都可以
vim package.json
并貼入下面的代碼
{
"name": "iOSAddRN", //你的工程的名字
"version": "0.0.1", //你的工程的版本號
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "^15.2.1", //react 的版本號
"react-native": "^0.31.0" //react-native 的版本號
}}
這里需要注意的是導(dǎo)入的react的版本號必須和react native相對應(yīng)谓晌，否則執(zhí)行的時候會出現(xiàn)警告或者報錯因悲。
如果執(zhí)行npm intall的時候出現(xiàn)警告你可以做出相應(yīng)的版本號修改
修改的方式如下：
打開package.json文件蜡镶，刪除"react": "^15.2.1", //react 的版本號
然后在項(xiàng)目的根目錄執(zhí)行npm install --save react@~15.2.1
后面@的就是你需要的版本號
2锋华、執(zhí)行nam install氛驮，你會看到你的工程目錄會多了一個文件夾node_modules葛作，
3寿羞、創(chuàng)建js文件：執(zhí)行vim 或者touch命令都可以
并在里面貼入下面代碼：
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
} from 'react-native';
class iOSAddRN extends Component {
render() {
return (
<View style={styles.container}> </View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: 'yellow',
},
});
AppRegistry.registerComponent('iOSAddRN', () => iOSAddRN);
把上面代碼里面的iOSAddRN改為你自己的工程名，必須一致赂蠢，否則會出現(xiàn)報錯绪穆。
4、創(chuàng)建podfile并通過cocoaPods下載依賴庫
vim Podfile
在里面貼入代碼
target 'iOSAddRN' do
pod 'React',
:path => './node_modules/react-native',
:subspecs => [
'Core',
'RCTText',
'RCTWebSocket', ]
end
同樣把上面代碼里面的iOSAddRN改為你自己的工程名虱岂，必須一致玖院，否則會出現(xiàn)報錯。
然后執(zhí)行 pod install
等待執(zhí)行完成量瓜，然后關(guān)閉當(dāng)前Xcode打開項(xiàng)目目錄出現(xiàn)的工作組
5司恳、引入RCTRootView，并初始化
6绍傲、如果包含有http請求扔傅，需要設(shè)置白名單
打開info.plist添加如下字段
App Transport Security Settings -》 Dictionary
Allow Arbitrary Loads -》 YES
不添加白名單的話會報錯：
could not connect to development server
7、開啟npm服務(wù)
執(zhí)行
npm start然后運(yùn)行Xcode程序
相關(guān)的問題：
如果出現(xiàn)以下報錯
請引入第三方依賴庫
libc++.tdb
最后希望大家項(xiàng)目運(yùn)行順利烫饼。想看項(xiàng)目源碼的話可以看這里
