[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,并且接入了更新代码。接下来我们使用一个案例来测试说明。


 




你可能感兴趣的:(react,ReactNative,CodePush)