[ReactNative集成CodePush教程][二] 集成Code Push到项目工程里

最新推荐文章于 2022-06-09 10:13:17 发布

爬行动物脑

最新推荐文章于 2022-06-09 10:13:17 发布

阅读量3.9k

点赞数 1

分类专栏： React Native 文章标签： CodePush React ReactNative

本文链接：https://blog.youkuaiyun.com/mad2man/article/details/51096768

版权

React Native 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍如何在ReactNative项目中手动集成CodePush进行热更新。包括安装步骤、代码修改及案例测试等内容。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

ReactNative集成CodePush教程集合

[一] 注册CodePush准备工作

[二] 集成Code Push到项目工程里

[三] 集成Code Push的案例说明

转载请保留出处：http://blog.youkuaiyun.com/mad2man

在项目工程安装CodePush，一般有两三种方法。

一种是cocoaPods接入，一种是手动接入，本文采用的是手动接入。

一. cocoaPods 引入（可选）

修改Podfile文件

 
          // 新增 
         
          pod  
          'CodePush' 
          , :path =>  
          './node_modules/react-native-code-push' 
         
          // 安装 
         
          pod install

二 . 手动引入（本文采用方法）

1. 在命令行下，进入整个工程的根目录，安装CodePush。

使用npm安装

 
          npm install  
          "react-native-code-push"  
          --save

2. 安装完毕后，可以根据package.json来查看是否正确安装了。

3. 用XCode打开iOS工程文件，然后将node_module/react-native-code-push/ios/CodePush.xcodeproj 这个文件拖进工程文件的Libraries文件夹下。

4. 进入工程的target，选择"Build Phases"，然后添加静态库 libCodePush.a，以及libz.tbd。

5. 添加完毕后，到“build Setting”选项卡里，修改“Header Search Paths”的目录，添加多一个路径：

$(SRCROOT)/../node_modules/react-native-code-push

以上的操作，即可成功集成CodePush。

三. 更改代码

在Appdelegate.m文件里面，将jscode加载的位置修改成由CodePush来指定。

Appdelegate.m

 
          #import "CodePush.h" 
         
          NSURL *jsCodeLocation; 
         
          #ifdef DEBUG 
         
          jsCodeLocation = [NSURL URLWithString:@ 
          "<a href="http://localhost:8081/index.ios.bundle?platform=ios&dev=true" "="" style="text-decoration: none; color: rgb(157, 243, 159) !important; border-top-left-radius: 0px !important; border-top-right-radius: 0px !important; border-bottom-right-radius: 0px !important; border-bottom-left-radius: 0px !important; background-image: none !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 20px !important; margin: 0px !important; outline: 0px !important; overflow: visible !important; padding: 0px !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: inherit !important;">http://localhost:8081/index.ios.bundle?platform=ios&dev=true" 
          ]; 
         
          #else 
         
          jsCodeLocation = [CodePush bundleURL]; 
         
          #endif

四修改info.plist文件

在info.plist文件中，添加多一个键值，CodePushDeploymentKey，然后值对应为已经注册号的应用的Production或者Staging的Deployment Key。

五修改JS代码

在需要启动代码更新的位置里面，引用CodePush，并且调用Code Push的更新接口。

这里我们一般选择的 componentDidMount() 这个方法里面。

热更新代码

 
          // Import the JavaScript module for CodePush: 
         
          import codePush from  
          "react-native-code-push" 
          ; 
         
          // Call the sync method from within the componentDidMount lifecycle event, to initiate a background update on each app start: 
         
          codePush.sync();