一脸懵逼：吐槽前言
后面慢慢吐槽
感谢前人分享经验系列 ：React-Native 资料
React-Native中文网
iOS 和 Android 开发的 React Native 入门指南
iOSer迈向前端一小步--OC/Swift与RN混编Demo (这里面有OC\RN混编的项目搭建Demo)
（后面如有用到有用的继续补充）
环境配置与项目搭建
环境配置与纯RN搭建看这个就行了
iOS中 RN与OC项目混编 （两个关键文件配置）
- package.json
- Podfile
package.json
{
"name": "RNProjectName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "15.4.2",
"react-native": "0.41.2"
}
}
name 项目名称
version 版本（遵守‘大版本.次要版本.小版本’的格式）
package.json详解
// 终端中
➜ app-iv3 git:(dev_2.7.2_Dombo_RN) ✗ ls
INTERNATIONAL_README laoyuegou package-lock.json
README node_modules package.json
➜ app-iv3 git:(dev_2.7.2_Dombo_RN) ✗ npm install
cd 到 package.json 所在的文件目录下
npm install
安装完成后会有一个 node_modules 文件夹
Podfile
# ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ====== ======
pod 'React', :path => ‘../node_modules/react-native', :subspecs => [
'Core',
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
]
# 根据需求添加项目中需要的模块
# path 这里要正确设置 node_modules/react-native 的所在路径，每个人不一样
配置完后，pod install 即可安装 React-Native 所以来的相关组件库
React-Native 咋用呢
// 倒入头文件
#import
//
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// 传给RN的参数必须是字典类型，要和js代码propertis一致
NSDictionary *params = @{@"scores" : @[
@{@"name" : @"Alex",
@"value": @"42"},
@{@"name" : @"Joel",
@"value": @"10"}
]
};
// moduleName 要对应index.ios.js 上的 AppRegistry module
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"RNTestViewModule"
initialProperties : params
launchOptions : nil];
// 去掉返回箭头的title
UIBarButtonItem *item = [[UIBarButtonItem alloc] init];
item.title = @"";
self.navigationItem.backBarButtonItem = item;
UIViewController *viewController = [UIViewController new];
viewController.view = rootView;
viewController.title = @"承载RN视图的VC";
[self.navigationController pushViewController:viewController animated:YES];
React-Native 0.45.0 以上版本需要下载boost等几个第三方库编译（是需要终端fan qiang的，否则超时失败）
- package.json
- Podfile
package.json
{
"name": "RNProjectName",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start"
},
"dependencies": {
"react": "16.4.1",
"react-native": "0.56.0"
}
}
Podfile.json
# Uncomment the next line to define a global platform for your project
react_native_path = './Extern/ReactNative/node_modules/react-native'
platform :ios, '9.0'
inhibit_all_warnings!
target 'RNProject' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!
# '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
剩下步骤跟part1 中的一样不再描述
运行
终端cd 到 package.json 文件下
如果是adb断了就使用一下步骤
- adb reverse tcp:8081 tcp:8081
- npm start
如果adb没断,直接 - npm start
RN报错与解决方案：
1、Argument list too long: recursive header expansion failed at
解决：查到的一些方法太好使，'node_modules'目录一般放于根目录中，不要放太深层的路径即可
2018-7-24更新，后续再补
IDE：Visual Studio Code
Visual studio Code 写RN所需要的插件