这里就不多说cocoapods的安装了,如果没有React Native的开发环境，可以参考官网的教程
上面的环境安装完成以后,用终端进入到你当前项目的根目录创建一个package.json的文件
$ touch package.json
在package.json中输入一下内容
{
"name": "LYDemo", //项目名称
"version": "0.0.1", //这个感觉没什么实际意义
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.2.0",
"react-native": "0.53.3",
"react-navigation": "^1.4.0"
},
"devDependencies": {
"babel-jest": "22.4.1",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "16.2.0"
},
"jest": {
"preset": "react-native"
}
}
在项目根目录下执行如下命令
$ npm install
安装好React Native需要的框架以后再Podfile文件中加入如下的三方库
# 'node_modules'目录一般位于根目录中
# 但是如果你的结构不同，那你就要根据实际路径修改下面的`:path`
#记得此处的路径，如果你有创建一个新的文件夹存放这些文件，前面要加上你文件夹的名字：'../RNComponent/node_modules/react-native'，如果没有，直接如下创建即可。
pod 'React', :path => './node_modules/react-native', :subspecs => [
'Core',
'BatchedBridge', # 0.45 版本以后需要添加
'RCTText',
'RCTImage', #这个库主要是为了使用<Image>标签
'DevSupport',
'RCTAnimation', #如果不加入这个的话在使用<TouchableOpacity>等触摸事件的时候会出现告警
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
]
# 如果你的RN版本 >= 0.42.0，请加入下面这行
# 该版本号是package.json中的“dependencies”字典下面的“react-native”后面对应的内容
pod "yoga", :path => "./node_modules/react-native/ReactCommon/yoga" #相当于读取本地的库
Podfile配置好以后直接运行
$ pod install
这个时候集成React Native的环境就算差不完成了
可能会出现一些报错 比如 'algorithm' file not found 可参看#17764
./node_modules/react-native/Libraries/NativeAnimation/RCTNativeAnimatedNodesManager.h 文件下
删除 #import <RCTAnimation/RCTValueAnimatedNode.h>
增加 #import "RCTValueAnimatedNode.h"
./node_modules/react-native/Libraries/WebSocket/RCTReconnectingWebSocket.m 文件下
删除 #import <fishhook/fishhook.h>
增加 #import <React/fishhook.h>
./node_modules/react-native/ReactCommon/yoga/yoga.podspec 文件下
source_files = 'yoga/**/*.{cpp,h}'
source_files = File.join('ReactCommon/yoga', source_files) if ENV['INSTALL_YOGA_WITHOUT_PATH_OPTION']
spec.source_files = source_files
这个位置增加如下代码
# Only expose the needed headers
spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h'
end
在根目录下创建 index.js 添加如下内容
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
class App extends Component {
render() {
return (
<View style={styles.rootViewStyle}>
<Text style = {styles.textStyle}>
{this.props["datas"]}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
rootViewStyle: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
textStyle: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
// 整体js模块的名称
AppRegistry.registerComponent('LYDemo', () => App);
在ios项目里面新建一个VC，在VC中引入#import <React/RCTRootView.h>头文件
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
//这里的index就是指的js文件，相当于这里是可以访问其他的js文件的，但是js文件中要写AppRegistry.registerComponent('LYDemo', () => 类名);
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://192.168.31.120:8081/index.bundle?platform=ios&dev=true"]; //这里如果用模拟器话可以写http://localhost:8081/ 如果是真机就必须写成你本机ip 不然就连接不到服务器
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"KuaiQi"
initialProperties:@{
@"datas" : @"Hello World"
}
launchOptions:nil];
rootView.backgroundColor = [UIColor redColor];
[self.view addSubview:rootView];
[rootView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.bottom.left.right.mas_equalTo(self.view);
}];
}
在项目的根目录下运行本地服务器，服务器开启以后之间运行xcode即可
$ npm start
