iOS原生应用添加react-native

相比大多数开发者接触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 (  
          
  ); 
 }
}
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,并初始化

iOS原生应用添加react-native_第1张图片

6、如果包含有http请求,需要设置白名单
打开info.plist添加如下字段

App Transport Security Settings    -》 Dictionary
Allow Arbitrary Loads          -》 YES

不添加白名单的话会报错:
could not connect to development server

iOS原生应用添加react-native_第2张图片

7、开启npm服务
执行 npm start
然后运行Xcode程序
相关的问题:
如果出现以下报错

iOS原生应用添加react-native_第3张图片

请引入第三方依赖库
libc++.tdb

最后希望大家项目运行顺利。想看项目源码的话可以看这里

你可能感兴趣的:(iOS原生应用添加react-native)