参考文档：reactnative文档
reactnative last version: 0.53版本我无力吐槽，0.52表示无能为力，我放弃了。本文是基于0.51版本。
(1) 新建xcode project，名字是ReactNativeDemo。在项目根目录下，新建ReactNative文件夹，用于存放跟reactnative相关文件。
image.png
(2) 打开终端，cd 到 ReactNative文件夹里面，创建package.json文件。
touch package.json
image.png
(3) 打开package.json，输入下面关于reactnative相关配置信息。
{
"name": "ReactNativeDemo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.0.0",
"react-native": "0.51.0"
}
}
(4) cd 到ReactNative文件夹里面，安装依赖包
npm install
image.png
安装完会多出两个文件。
image.png
(5) 新建index.js文件，作为reactnative程序入口，之前的版本是index.ios.js
touch index.js
image.png
(6) 在index.js中写测试代码...
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class ScoresView 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,
},
});
// 注册组件，程序入口
// 第一个参数：注册模块名称,这里亲测不和项目名一致也可以，但是好多资料说名字要和项目名一致
// 第二个参数：函数，此函数返回组件类名，程序启动就会自动去加载这个组件
AppRegistry.registerComponent('App', () => ScoresView);
(7) cd 到项目根目录，创建profile文件
image.png
(8) pod以下文件：
特殊说明：这里用CxxBridge 代替 BatchedBridge，因为BatchedBridge不久将会被remove掉。
react_native_path：文件路径必须和自己创建的实际文件路径一样
source 'https://github.com/CocoaPods/Specs.git'
react_native_path = './ReactNative/node_modules/react-native'
platform :ios, ‘9.0’
use_frameworks!
target 'ReactNativeDemo' do
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
pod 'React', :path => react_native_path, :subspecs => [
'Core',
#'BatchedBridge', # 0.45 版本以后需要添加
'CxxBridge',
'DevSupport', # 如果RN版本 >= 0.43，则需要加入此行才能开启开发者菜单
'RCTText',
'RCTImage',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
]
# 如果你的RN版本 >= 0.42.0，则加入下面这行
pod 'yoga', :path => react_native_path + '/ReactCommon/yoga'
# Third party deps
pod 'DoubleConversion', :podspec => react_native_path + '/third-party-podspecs/DoubleConversion.podspec'
pod 'GLog', :podspec => react_native_path + '/third-party-podspecs/GLog.podspec'
pod 'Folly', :podspec => react_native_path + '/third-party-podspecs/Folly.podspec'
end
终端执行pod install
pod install
(9) 配置App Transport Security
<key>NSAppTransportSecurity</key>
<dict>
<key>NSExceptionDomains</key>
<dict>
<key>localhost</key>
<dict>
<key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
<true/>
</dict>
</dict>
</dict>
(10) 打开项目，在ViewController随便添加按钮，添加点击事件。
记得导入头文件
#import <React/RCTRootView.h>
添加点击跳转方法：
- (IBAction)pushToReactNativeView:(id)sender {
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"App"
initialProperties:
@{
@"scores" : @[
@{
@"name" : @"Alex",
@"value": @"42"
},
@{
@"name" : @"Joel",
@"value": @"10"
}
]
}
launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}
⚠️运行会报错：
把#import <fishhook/fishhook.h> 改为 #import "fishhook.h"就好了。
image.png
(11) 打开服务器：
cd到ReactNative文件夹，终端开启服务器：
npm start
image.png
(12) 运行结果：
reactnative.gif
网友评论