3分钟完成React-Native热更新

前端之家收集整理的这篇文章主要介绍了3分钟完成React-Native热更新前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

此文使用当下最新版本的RNCode-Push进行演示,其中的参数不会过多进行详细解释,更多参数解释可参考其它文章,这里只保证APP能正常进行热更新操作,方便快速入门,开始来快活吧。

操作指南

以下操作在Mac系统上完成
项目地扯https://github.com/dounine/dounineApp
Branches:3分钟完成React-Native热更新

1. 创建React-Native项目

  1. react-native init dounineApp

2. 安装code-push-cli

  1. npm install -g code-push-cli

3. 注册code-push帐号

  1. code-push register
  2. Please login to Mobile Center in the browser window we've just opened.
  3.  
  4. Enter your token from the browser:
  5. #会弹出一个浏览器,让你注册,可以使用github帐号对其进行授权,授权成功会给一串Token,点击复制,在控制进行粘贴回车(或者使用code-push login命令)。
  1. Enter your token from the browser: b0c9ba1f91dd232xxxxxxxxxxxxxxxxx
  2. #成功提示如下方
  3. Successfully logged-in. Your session file was written to /Users/huanghuanlai/.code-push.config. You can run the code-push logout command at any time to delete this file and terminate your session.

4. 在code-push添加一个ios的app

  1. code-push app add dounineApp-ios ios react-native
  2. #成功提示如下方
  3. Successfully added the "dounineApp-ios" app,along with the following default deployments:
  4. ┌────────────┬──────────────────────────────────────────────────────────────────┐
  5. Name Deployment Key
  6. ├────────────┼──────────────────────────────────────────────────────────────────┤
  7. Production yMAPMAjXpfXoTfxCd0Su9c4-U4lU6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
  8. ├────────────┼──────────────────────────────────────────────────────────────────┤
  9. Staging IjC3_iRGEZE8-9ikmBZ4ITJTz9wn6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
  10. └────────────┴──────────────────────────────────────────────────────────────────┘

5. 继续在code-push添加一个android的app

  1. code-push app add dounineApp-android android react-native
  2. #成功提示如下方
  3. Successfully added the "dounineApp-android" app,along with the following default deployments:
  4. ┌────────────┬──────────────────────────────────────────────────────────────────┐
  5. Name Deployment Key
  6. ├────────────┼──────────────────────────────────────────────────────────────────┤
  7. Production PZVCGLlVW-0FtdoCF-3ZDWLcX58L6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
  8. ├────────────┼──────────────────────────────────────────────────────────────────┤
  9. Staging T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
  10. └────────────┴──────────────────────────────────────────────────────────────────┘

6. 在项目根目录添加react-native-code-push

  1. npm install react-native-code-push --save
  2. #或者
  3. yarn add react-native-code-push

7. link react-native-code-push

  1. react-native link
  2. Scanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (8ms)
  3. ? What is your CodePush deployment key for Android (hit <ENTER> to ignore) T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
  4.  
  5. #将刚才添加的Android App的Deployment Key复制粘贴到这里,复制名为Staging测试Deployment Key。
  6.  
  7. rnpm-install info Linking react-native-code-push android dependency
  8. rnpm-install info Android module react-native-code-push has been successfully linked
  9. rnpm-install info Linking react-native-code-push ios dependency
  10. rnpm-install WARN ERRGROUP Group 'Frameworks' does not exist in your Xcode project. We have created it automatically for you.
  11. rnpm-install info iOS module react-native-code-push has been successfully linked
  12. Running ios postlink script
  13. ? What is your CodePush deployment key for iOS (hit <ENTER> to ignore) IjC3_iRGEZE8-9ikmBZ4ITJTz9wn6dec4087-57cf-4c9d-b0dc-ad38ce431e1d
  14.  
  15. #继续复制Ios的Deployment Key
  16.  
  17. Running android postlink script

8. 在react-nativeApp.js文件添加自动更新代码

  1. ...
  2. import codePush from "react-native-code-push";
  3. const codePushOptions = { checkFrequency: codePush.CheckFrequency.MANUAL };
  4. export default class App extends Component<{}> {
  5.  
  6. componentDidMount(){
  7. codePush.sync({
  8. updateDialog: true,installMode: codePush.InstallMode.IMMEDIATE,mandatoryInstallMode:codePush.InstallMode.IMMEDIATE,//deploymentKey为刚才生成的,打包哪个平台的App就使用哪个Key,这里用IOS的打包测试
  9. deploymentKey: 'IjC3_iRGEZE8-9ikmBZ4ITJTz9wn6dec4087-57cf-4c9d-b0dc-ad38ce431e1d',});
  10. }
  11. ...

9. 运行项目在ios模拟器上

  1. react-native run-ios

如图下所显
1:开启debug调试
2:CodePush已经成功运行
目前App已经是最新版本

10. 发布一个ios新版本

  1. code-push release-react dounineApp-ios ios
  2. #发布成功如图下
  3. Detecting ios app version:
  4.  
  5. Using the target binary version value "1.0" from "ios/dounineApp/Info.plist".
  6.  
  7. Running "react-native bundle" command:
  8.  
  9. node node_modules/react-native/local-cli/cli.js bundle --assets-dest /var/folders/m_/xcdff0xd62j4l2xbn_nfz00w0000gn/T/CodePush --bundle-output /var/folders/m_/xcdff0xd62j4l2xbn_nfz00w0000gn/T/CodePush/main.jsbundle --dev false --entry-file index.js --platform ios
  10. Scanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (10ms)
  11. Scanning folders for symlinks in /Users/huanghuanlai/dounine/oschina/dounineApp/node_modules (10ms)
  12. Loading dependency graph,done.
  13.  
  14. bundle: start
  15. bundle: finish
  16. bundle: Writing bundle output to: /var/folders/m_/xcdff0xd62j4l2xbn_nfz00w0000gn/T/CodePush/main.jsbundle
  17. bundle: Done writing bundle output
  18.  
  19. Releasing update contents to CodePush:
  20.  
  21. Upload progress:[==================================================] 100% 0.0s
  22. Successfully released an update containing the "/var/folders/m_/xcdff0xd62j4l2xbn_nfz00w0000gn/T/CodePush" directory to the "Staging" deployment of the "dounineApp-ios" app.

11. 重新Load刷新应用

12. 安卓发布
与上面9~11步骤是一样的,命令改成Android对应的,以下命令结果简化

  1. #1.修改App.js的deploymentKey为安卓的
  2. ...
  3. deploymentKey:'T0NshYi9X8nRkIe_cIRZGbAut90a6dec4087-57cf-4c9d-b0dc-ad38ce431e1d'
  4. ...
  5. #2.运行
  6. react-native run-android
  7. #3.发布
  8. code-push release-react dounineApp-android android
  9. #4.刷新应用,如下图

至此已经完成RN热更新,进阶内容请参考其它文章

猜你在找的React相关文章