React Native工程离线运行的重点是将index.ios.bundle文件保存在机器本地,index.ios.bundle文件是工程编译后的js文件的打包,index.ios.bundle 将被 packager服务器 创建。。
纯RN工程
纯RN工程在工程创建好后就XCode目录中就包含了main.jsbundle文件,只不过文件是不存在的(XCode文件名红色),这个文件就是编译的时候由packager服务器打包好的index.ios.bundle文件。
修改AppDelegate.m中的jsCodeLocation
注释掉
jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
取消注释
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
打包
纯RN工程离线运行只要按照正常的流程打包app即可,因为index.ios.bundle在打包过程中会自动生成并绑定到main.jsbundle,离线运行时就会根据jsCodeLocation找到js文件了。
混编工程
由于混编工程一开始是由XCode创建的,并不存在main.jsbundle文件,因此需要手动generate。
生成本地main.jsbundle
在项目根目录下执行
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
如果curl命令执行失败,请确保服务器已开启,否则提示8081端口8081无法连接。
执行成功后工程目录中就多了main.jsbundle文件,然后将他拖到XCode中。
设置jsCodeLocation指向本地main.jsbundle文件
jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
打包
也是正常的打包流程。
其他
如果不希望在离线时调试,确保打包之前将scheme中的archive模式设置成release,这样就不会弹出调试菜单了。