- 创建一个原生项目,项目名为 iOS_ReactNative_Demo
- 项目根目录创建一个文件夹,名字为ReactComponent,放和 reactnative 相关的文件
-
在ReactComponent中创建一个package.json文件,文件内容如下:
packajson.png
建议:文件中的内容可以单独创建一个 rn 项目,然后把项目中的 package.json 中的内容拷贝过来
- 在ReactComponent目录下运行命令行
npm install
-
在ReactComponent文件夹里创建index.js文件，作为js文件入口.
indexjs.png
index.js 内容如下
import React, { Component } from 'react';
import {
AppRegistry,
Platform,
StyleSheet,
Text,
View
} from 'react-native';
const instructions = Platform.select({
ios: 'Press Cmd+R to reload,\n' +
'Cmd+D or shake for dev menu',
android: 'Double tap R on your keyboard to reload,\n' +
'Shake or press menu button for dev menu',
});
export default class App extends Component<{}> {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
//这里的name 和 age 就是从原生界面传过来的数据
我的名字是:{this.props.name}
</Text>
<Text style={styles.welcome}>
我今年{this.props.age}岁
</Text>
<Text style={styles.instructions}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
//'App'是组件名,'iOS_ReactNative_Demo'是项目名
AppRegistry.registerComponent('iOS_ReactNative_Demo', () => App);
- 集成 CocoaPods,在根目录下创建 Podfile 文件,文件内容如下
要特别注意路径问题,node_modules的路径要和自己项目的目录匹配
:path => './ReactComponent/node_modules/react-native'
pod "yoga", :path => "./ReactComponent/node_modules/react-native/ReactCommon/yoga"
platform :ios, ‘9.0’
target ‘iOS_ReactNative_Demo’ do
pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'ART',
'RCTImage',
'RCTNetwork',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTLinkingIOS',
'CxxBridge', # 如果RN版本 >= 0.45则加入此行
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的RN模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod "yoga", :path => "./ReactComponent/node_modules/react-native/ReactCommon/yoga"
# 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
pod 'DoubleConversion', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => './ReactComponent/node_modules/react-native/third-party-podspecs/Folly.podspec'
end
- 在根目录下执行
pod install
//如果速度特别慢,可以试试下面的命令
pod install --verbose --no-repo-update
一切顺利的话,基本就完成集成了,接下来是在原生项目中使用 rn.
集成完毕后,编译,有可能会遇到以下问题.
出现错误“fatal error: 'React/RCTEventEmitter.h' file not found”
解决方案
(这里我只尝试了第一步就可以正常编译了)
1. Disable the parallel builds:
* xCode menu -> Product -> Scheme -> Manage Shemes...
* Double click on your application
* Build tab -> clear the tick on Pallelize Build
2. Add react as a project dependecy
* xCode Project Navigator -> drag React.xcodeproj from Libraries to root tree
* Build Phases Tab -> Target Dependencies -> + -> add React
解决编译问题后,继续在原生的页面中嵌入 rn 页面,代码如下
这里 data 是要传给 rn 页面的数据.
//引入头文件
#import <React/RCTRootView.h>
NSURL * jsCodeLoc = [NSURL URLWithString:@"http://192.168.1.16:8081/index.bundle?platform=ios&dev=true"];
NSDictionary * data = @{@"name": self.nameTF.text,
@"age": self.ageTF.text
};
RCTRootView * rootV = [[RCTRootView alloc] initWithBundleURL:jsCodeLoc moduleName:@"iOS_ReactNative_Demo" initialProperties:data launchOptions:nil];
RNViewController * rnVC = [[RNViewController alloc] init];
rnVC.view = rootV;
[self.navigationController pushViewController:rnVC animated:YES];
注意:这里的192.168.1.16是我本地电脑的 IP 地址,之所以填 IP 地址,主要是按照官网的教程集成时,填写localhost 报错,提示无法连接开发服务器, google 后发现有方法说换成 IP 地址可以.
为了保证能正常连接本地启动的 rn 服务器,需要在 info.plist 文件中添加以下内容
infoplist.png
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
网友评论