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

ReactNative集成CodePush教程集合

[一] 注册CodePush准备工作

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

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

转载请保留出处：http://blog.csdn.net/mad2man

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

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

一.  cocoaPods 引入（可选）

修改Podfile文件

1 2 3 4 5

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

 

 

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

 

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

使用npm安装

1	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

1 2 3 4 5 6 7

#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() 这个方法里面。

热更新代码

1 2 3 4 5 6 7 8 9 10

// 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();

 

到这里为止，我们已经成功引入了CodePush，并且接入了更新代码。接下来我们使用一个案例来测试说明。