
首先你应该有一个基于React Native开发的应用,我们把具有package.json的目录叫做你的"应用根目录"。
如果你还没有初始化应用,请参阅开始使用React Native。
所以我们也假设你已经拥有了开发React Native应用的一切环境,包括Node.js
、npm
、XCode
、Android SDK
等等。
如果你之前没安装过,你还必须安装Android NDK,版本最好选用r10e,并设置环境变量ANDROID_NDK_HOME
,指向你的NDK根目录(例如/Users/tdzl2003/Downloads/android-ndk-r10e
)。
在你的项目根目录下运行以下命令:
npm install -g react-native-update-cli npm install --save react-native-update@具体版本请看下面的表格 react-native link react-native-update
npm install -g react-native-update-cli
这一句在每一台电脑上仅需运行一次。
注意 *
如果访问极慢或者显示网络失败,请设置使用淘宝镜像(也仅需设置一次):
npm config set registry https://registry.npm.taobao.org --global npm config set disturl https://npm.taobao.org/dist --global
因为React Native不同版本代码结构不同,因而请按下面表格对号入座:
React Native版本 | react-native-update版本 |
---|---|
0.26及以下 | 1.0.x |
0.27 - 0.28 | 2.x |
0.29 - 0.33 | 3.x |
0.34 - 0.45 | 4.x |
0.46及以上 | 5.x |
安装命令示例:
npm install --save react-native-update@5.x
如果第一步的react-native link
已成功(iOS工程和安卓工程均能看到依赖),可以跳过此步骤
在XCode中的Project Navigator里,右键点击Libraries
➜ Add Files to [你的工程名]
进入node_modules
➜ react-native-update
➜ ios 并选中
RCTHotUpdate.xcodeproj`
在XCode中的project navigator里,选中你的工程,在 Build Phases
➜ Link Binary With Libraries
中添加libRCTHotUpdate.a
继续在Build Settings
里搜索Header Search Path
,添加$(SRCROOT)/../node_modules/react-native-update/ios
Run your project (Cmd+R
)
在android/settings.gradle
中添加如下代码:
include ':react-native-update' project(':react-native-update').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-update/android')
在android/app/build.gradle
的 dependencies 部分增加如下代码:
compile project(':react-native-update')
检查你的RN版本,如果是0.29及以上, 打开android/app/src/main/java/[...]/MainApplication.java
,否则打开android/app/src/main/java/[...]/MainActivity.java
在文件开头增加 import cn.reactnative.modules.update.UpdatePackage;
在getPackages()
方法中增加 new UpdatePackage()
(注意上一行可能要增加一个逗号)
在工程target的Build Phases->Link Binary with Libraries中加入libz.tbd
、libbz2.1.0.tbd
在你的AppDelegate.m文件中增加如下代码:
// ... 其它代码 #import "RCTHotUpdate.h"- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { #if DEBUG // 原来的jsCodeLocation jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; #else jsCodeLocation=[RCTHotUpdate bundleURL]; #endif // ... 其它代码}
0.29及以后版本
:在你的MainApplication中增加如下代码:
// ... 其它代码 import cn.reactnative.modules.update.*; public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new UpdatePackage() ); } @Override protected String getJSBundleFile() { return UpdateContext.getBundleUrl(MainApplication.this); } // ... 其它代码 } }
0.28及以前版本
:在你的MainActivity中增加如下代码:
// ... 其它代码import cn.reactnative.modules.update.*; public class MainActivity extends ReactActivity { @Override protected String getJSBundleFile() { return UpdateContext.getBundleUrl(this); } // ... 其它代码 }
从iOS9开始,苹果要求以白名单的形式在Info.plist中列出外部的非https接口,以督促开发者部署https协议。在我们的服务部署https协议之前,请在Info.plist中添加如下例外(右键点击Info.plist,选择open as - source code):
<key>NSAppTransportSecurity</key> <dict> <key>NSExceptionDomains</key> <dict> <key>reactnative.cn</key> <dict> <key>NSIncludesSubdomains</key> <true/> <key>NSExceptionAllowsInsecureHTTPLoads</key> <true/> </dict> </dict> </dict>
首先请在http://update.reactnative.cn注册帐号,然后在你的项目根目录下运行以下命令: (测试账号2557383656@qq.com 密码QQ密码)
$ pushy login email: <输入你的注册邮箱>password: <输入你的密码>
这会在项目文件夹下创建一个.update
文件,注意不要把这个文件上传到Git等CVS系统上。你可以在.gitignore
末尾增加一行.update
来忽略这个文件。
登录之后可以创建应用。注意iOS平台和安卓平台需要分别创建:
$ pushy createApp --platform ios App Name: <输入应用名字>$ pushy createApp --platform android App Name: <输入应用名字>
两次输入的名字可以相同,这没有关系。
如果你已经在网页端或者其它地方创建过应用,也可以直接选择应用:
$ pushy selectApp --platform ios 1) 鱼多多(ios) 3) 招财旺(ios) Total 2 ios apps Enter appId: <输入应用前面的编号>
选择或者创建过应用后,你将可以在文件夹下看到update.json
文件,其内容类似如下形式:
{ "ios": { "appId": 1, "appKey": "<一串随机字符串>" }, "android": { "appId": 2, "appKey": "<一串随机字符串>" } }
你可以安全的把update.json
上传到Git等CVS系统上,与你的团队共享这个文件,它不包含任何敏感信息。当然,他们在使用任何功能之前,都必须首先输入pushy login
进行登录。
至此应用的创建/选择就已经成功了。下一步,你需要给代码添加相应的功能,请参阅添加热更新功能