开发环境的配置
1. 安装node.js & package.json(依赖及版本配置文件)
2. react 0.47.2
3. podfile
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'CxxBridge', # 如果RN版本 >= 0.47则加入此行
'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTLinkingIOS',
'RCTSettings',
]
# 如果你的RN版本 >= 0.42.0,则加入下面这行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
4. RCTRootView
RN在native页面的展现主要通过RCTRootView。示例代码(加载bundle包):
NSURL *jsCodeLocation;
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"index.ios" withExtension:@"bundle"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL: jsCodeLocation
moduleName: @"app"
initialProperties:
nil launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
5. 打包
RN项目可以打成一个bundle包,供他人使用,但是不含资源文件
整体思路
项目思路
- 安装node.js
- 根据package.json npm start
- 调整项目结构
- pod install
设计思路
1. 热更新:
- RN开发后资源用相对路径,打bundle后一起压缩zip,传至后台
- 客户端请求接口,根据项目ID,第一次请求或者版本号不相符,下载zip,解压至Cache文件夹。根据ID创建路径
- 进入RN页面前,如果不需要更新,直接找到bundle进入,如果需要更新,下载替换
- 发生错误,删除相应路径下文件,重新下载。
2. 增量
3. 预加载
问题点
1. 安装低版本的react,package里配置
2. 提示为register,index入口名配置问题
3. 本地运行RN代码,需要启动npm,且http请求设置为允许
启动npm后可以动态调试
4. react本地运行版本与bundle版本要保持一致
高了或者低了都不行
5. RN调用原生 Native类名
· push 需要获取 Appdelegate导航控制器
· push or pop 要在main_queue中执行,否则可能会失效
· 回调用RCTPromiseResolveBlock/RCTPromiseRejectBlock(官方的另一种方式不知道为何失效,待核查)
6. Native向RN传参
如果用initialProperties,RN页面内如果采用navigation或者多级页面,一定要逐层将props传递,传递后直接取出this.props.xxx