一、环境集成:
导入依赖的包资源
- 创建一个iOS项目,切换到项目的根目录;
- 得到package.json文件(直接react-native init ~ 产生一个新的工程,拷贝package.json文件即可);
- 修改package.json文件里面的工程名字为此项目的工程名字;
-
用命令行cd到项目的根目录;执行命令:npm install;
-
完成之后在项目目录中会出现node_modules文件夹,里面就是react-native依赖的所有项目包。
集成CocoaPod,并配置编译环境
- 1.1、切换到项目根目录,往Podfile中增加以下的内容。如果你还没有这个文件,在你工程的根目录下创建一个。
- Podfile里面的执行代码:
target 'RNTest02’ do
pod 'React', :path => './node_modules/react-native', :subspecs => [ 'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
// 添加其他你想在工程中使用的依赖。
]
end
- 1.2、接着,终端切换到项目的根目录,命令行执行:
$ pod install
- 1.3、 创建一个文件夹来保存你的React代码,然后创建一个index.ios.js文件: 运行命令
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
$ touch ReactComponent/其他要的js文件,比如主页等等
-
1.4、添加一个容器视图来容纳RN组件,它可以是你应用里任何的UIView:(加载这个页面时启动RN服务器)
进到iOS项目工程中,创建一个继承自UIView的类,比如:RNLoadView(可以任意命名!),并进行RN初始化配置:
-
4)在index.ios.js中实现跨平台代码:
二、启动开发服务器
在运行我们的项目之前,我们需要先启动我们的开发服务器。命令行进入进入项目根目录,执行 $ react-native start
注意:直接运行项目会报Could not connect to development server错误,需要在项目中做如下配置: