React Native嵌入ios项目集成(坑点)方略

第一步安装cocoapods
mac自带ruby如果版本低了跟新一下 ruby —version(两个- -)

sudo gem install cocoapods

第二步添加package.json文件
cd到ios工程目录中 执行 vim package.json然后编辑一下 name:为项目名称根据自己的改一下

{
  "name": "RNTest",
  "version": "0.0.1",//项目版本
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },
  "dependencies": {
    "react": "15.0.2", react版本一定要精确到小数点2位
    "react-native": "0.26.1" react-native版本目前已到0.45以上
  }
}

第三步安装node_mpdules
cd到根目录 执行npm install

 cd 你的项目根目录 npm install

第四步(框架或者叫组建的下载)这一步看自己项目的需求选择吧(我卡在了这一步下载太慢不想等所以手动集成了)
创建Podfile文件
cd到ios工程根目录
pod init
完成以后会出现一个Podfile文件然后修改一下

target 'RNTest' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for RNTest
 pod 'React', :path => '/Users/ljl/Desktop/iOS/ios/RNTest/node_modules/react-native', :subspecs => [
    'Core',
    'RCTText',
    'RCTWebSocket',]
end

注意:/Users/ljl/Desktop/iOS/ios/RNTest/node_modules/react-native为你自己的node_modules中的react-native路径

完成以后 pod install(这一步很费时键主要是墙的原因,由于我用蓝灯免费版的不稳定所以我选择了手动集成)
第五步创建inde.ios.js(rn的入口函数)
cd到根目录,执行以下命令

touch index.ios.js

然后编写index.ios.js代码(我是在这里面写代码的,一般的话是不在这里面写代码的)代码示例
样板代码

use strict'; 
import React from 'react'; 
import {
 AppRegistry,
 StyleSheet, 
Text,
 View } from 'react-native'; 
class RNHighScores extends React.Component { 
render() { 
var contents = this.props["scores"].map( 
score => <Text key={score.name}>{score.name}:{score.value}{"\n"}</Text> ); 
return ( 
<View style={styles.container}>
 <Text style={styles.highScoresTitle}> 2048 High Scores! </Text> 
<Text style={styles.scores}> 
{contents} </Text>
 </View> ); 
}
 } 
const styles = StyleSheet.create({ 
container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#FFFFFF', }, highScoresTitle: { fontSize: 20, textAlign: 'center', margin: 10, }, scores: { textAlign: 'center', color: '#333333', marginBottom: 5, }, }); 
// Module name(此处是自定义rn组键名字,ios原生代码中需要用到)
 AppRegistry.registerComponent('RNHighScores', () => RNHighScores);

第六步:编写ios代码调用rn
运行项目(记得运行.xcworkspace文件)

——————————手动集成(由于不想等所以选择手动集成了一下发现坑点很多)
假设你packe.json和node_modules都好了
我们倒入React Native框架
在你的ios项目中创建一个Librarys(Group)
然后把RNTestDemo/node_modules/react-native/下的React/React.xcodeproj到项目Librarys中
并拖拽RNTestDemo/node_modules/react-native/下的类库到项目中一共14个好像

然后想项目中添加.a库

向Edit Scheme的Build中添加React,并拖拽到最上位置,并取消勾选Parallelize Build选项,这一步很关键,因为项目需要先编译React.a文件如图

Build Settings 中需要设置
Other Linker Flags -ObjC
可能需要设置
Header Search Paths “$(SRCROOT)/../node_modules/react-native/React” 并设置为 recursive

到这里集成就算完成了不过当运行的时候我发现了如下错误

问题一ReactNative : ignoring return value of function declared with warn_unused_result attribute

解决:RCTWebSocket => TAGETS =>Build Settings => Custom Compiler Flags 去掉 -Werror -Wall两个flags 再运行项目就可以了

问题二No known class method for selector 'removeFromSuperview'

解决://注释掉那一行

问题三Apple LLVM 9.0 Error和clang: error: no input files

然后看了一下发现ART.a库中某几个文件找不到,这个问题一般是因为你删除或者移动了某一个文件，但是在你的编译资源里面（ project > target > Build Phases > Compile Sources）还存在它，只要在（project > target > Build Phases > Compile Sources）里面把那些红色的文件删除掉，就可以编译过了。

问题四:'React/RCTRooView.h' file not found

解决:link:Link.Binary with Library—>add Other->node_modules->react-native->base->RCTRootView.h/m

问题5:9.0以后的http访问限制
添加词典(略)

问题:报错 aplle mach-o linker error
面是多条相: No such file or directory:/用户/你的电脑名字/资源库/Developer/Xcode/DerivedData/ReactTest-btpmanrevsbkvmgekyndexwjenzv/Build/Products/Debug-iphonesimulator/rct.a错误
解决
由于我在模拟器上运行过一个项目里面有缓存,把里面的文件删除在运行