基于ReactNative的项目构建流程

整体环境:

1,对于MAC开发机,环境搭建参考资料: https://facebook.github.io/react-native/docs/getting-started.html
Building Projects with Native Code:
Development OS:macOS Target OS:ios和Android
react-native的搭建官网有了改动,可以参考:http://reactnative.dev/docs/environment-setup
注:安装jdk不需要在.bash_profile中配置环境变量
2,开发工具VS Code插件:
React Native Tools
Babel ES6/ES7
ESLint
Prettier
Auto Close Tag

Android 环境搭建步骤

1,将工程根目录下的Android文件导入Android Studio,进行编译,生成apk文件安装到真机
2,在项目根目录下执行以下两步:
2.1 adb reverse tcp:8081 tcp:8081:反向代理,流量走usb
2.2 react-native run-android :启动服务
注:在执行react-native run-android命令的时候会报有些react-native依赖包找不到,需要翻墙下载

iOS 环境搭建步骤

模拟器调试:
按照官方教材安装Xcode
安装react-native-cli
执行命令yarn,安装node_modules依赖包
在项目目录下执行react-native run-ios,如在编译过程中报错:/bdcloud_frontend/ios/build/Build/Intermediates.noindex/Branch.build/Debug-iphonesimulator/Branch.build/Script-33DDE884200DF04B0047EB71.sh: line 3: /bdcloud_frontend/ios/scripts/react-native-xcode.sh: Permission denied,则执行chmod a+x /bdcloud_frontend/ios/scripts/react-native-xcode.sh
真机调试:
打开xcode,通过USB连接设备,运行工程,将App加载到真机上
运行项目目录下/ios/MacDebuggerClient/MacDebuggerClient.xcodeproj工程,启动mac机通行server
然后就可以愉快的进行调试啦
真机离线包安装
执行命令react-native bundle --entry-file index.js --bundle-output ./ios/bdcloud/main.jsbundle
打开xcode,通过USB连接设备,运行工程,将App加载到真机上

常见问题

Metro Bundler can’t listen on port 8081
sudo lsof -i:8081
kill 查到的pid号

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值