相比大多数开发者接触react-native后都是将RN嵌入到现有原生应用,但是看了官网的流程很多人都不是很清晰,现在我把自己嵌入RN的过程在这里贴出来,同时帮助大家少走些弯路。
参考的官方文档:http://reactnative.cn/docs/0.31/integration-with-existing-apps.html#create-an-event-path
1、创建package.json文件
执行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 的版本号
}}
这里需要注意的是导入的react的版本号必须和react native相对应,否则执行的时候会出现警告或者报错。
如果执行npm intall
的时候出现警告你可以做出相应的版本号修改
修改的方式如下:
打开package.json文件,删除"react": "^15.2.1", //react 的版本号
然后在项目的根目录执行npm install --save react@~15.2.1
后面@的就是你需要的版本号
2、执行nam install
,你会看到你的工程目录会多了一个文件夹node_modules
,
3、创建js文件:执行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
改为你自己的工程名,必须一致,否则会出现报错。
4、创建podfile并通过cocoaPods下载依赖库
vim Podfile
在里面贴入代码
target 'iOSAddRN' do
pod 'React',
:path => './node_modules/react-native',
:subspecs => [
'Core',
'RCTText',
'RCTWebSocket', ]
end
同样把上面代码里面的iOSAddRN
改为你自己的工程名,必须一致,否则会出现报错。
然后执行 pod install
等待执行完成,然后关闭当前Xcode打开项目目录出现的工作组
5、引入RCTRootView,并初始化
6、如果包含有http请求,需要设置白名单
打开info.plist添加如下字段
App Transport Security Settings -》 Dictionary
Allow Arbitrary Loads -》 YES
不添加白名单的话会报错:
could not connect to development server
7、开启npm服务
执行
npm start
然后运行Xcode程序
相关的问题:
如果出现以下报错
请引入第三方依赖库
libc++.tdb
最后希望大家项目运行顺利。想看项目源码的话可以看这里