react native常见的错误

更多组件：https://react.parts/native，调用系统的，注意查看：支持iOS or 安卓

            组件和相关使用

样式用这种方式定义，可以单独提出来成一个文件。
1.引入外部样式：
var Style = require(‘./Styles’);
就可引入相对自己目录下的Styles.js，注：React Native 没有所谓的CSS。

var styles = StyleSheet.create({ 
base: {
width: 38,
height: 38,
},
background: {
backgroundColor: '#222222',
},
active: {
borderWidth: 2,
borderColor: '#00ff00'
}
});

使用样式：

<Text style={styles.base} /> 
<View style={styles.background} />

2.以下是组件说明：
2.AppRegistry：应用注册，用于初始化启动应用
AppRegistry.registerComponent(项目名, () =><入口Class名>);
例如：AppRegistry.registerComponent('AwesomeProject', () => SampleComponent);
3.View：试图，里面可以套用子试图：

<View style={styles.view }>
      <View style={styles.subview }>
           你的其它组件
      <View>
</View>

布局使用的，Android 和 IOS 都支持。

4.Text：用于显示你要显示的文字：

<Text style={styles.Text }>你的文字</Text>

你可以配合字体样式去用

5.Image：用于显示图片信息：

Image source={{uri: team.logo}} style={styles.thumbnail}/>

Source: 图片源（URL）（请求网络用uri，请求本地用：（require(‘image! <图片>’)））
注意：图片只能放在：android\app\src\main\res\drawable-[尺寸]，目录下，才能被找到，其它任意位置均不能使用本地图片（文件命名：全字母小写，才能使用，否则报错）。

6.ListView: 列表试图，用于渲染自定义列表：

<ListView 
dataSource={this.state.dataSource} 
renderRow={this.renderScoreboard}
style={styles.listView} />

dataSource：数据源（JSON 格式）
renderRow：自定义渲染行（绑定一个方法，在this下返回JSX，自定义行代码）

7.Loading加载试图的做法
1.this->renderLoadingView，建立一个显示 文字 或Image。

2.在列表渲染的时候之前，做一个这个判断，让它显示。
这里说一下，请求数据，是如何工作的，这里要用到new ListView.DataSource 和fetch

3.如上图：初始化数据使用getInitialState，对dataSource初始化，
rowHasChanged: (row1, row2) => row1 !== row2，和下面这句
rowHasChanged: function(row1, row2){ row1 !== row2} 这两句是相等的，用于行是否改编

1. 请求数据使用的是fetch ，REQUEST_URL 是URL地址,第一个then用于 调试 或 改写返回结果，第二个then用于渲染界面，第三个catch是请求出错，所执行的。
2. 更多请求详情，可参考：https://github.com/github/fetch，(文件上传 和 表单提交，添加头部 及 提交方式，可参考，最后两项)

8.TextInput: 文本输入框，用于输入文字的

<TextInput placeholder='Search via name or postcode' secureTextEntry={true} />
Placeholder：提示要显示的文字
secureTextEntry：是否是密码框

以下是三个触屏试图：
9.TouchableHighlight: 触屏高亮试图，体验效果更好。

<TouchableHighlight underlayColor='#99d9f4'>
<Text style={styles.buttonText}>Go</Text>
</TouchableHighlight>
underlayColor: 高亮所显示的颜色

10.TouchableNativeFeedback: 导航返回试图

<TouchableNativeFeedbackonPress={this._pressButton}                    background={TouchableNativeFeedback.SelectableBackground()}>
</TouchableNativeFeedback>

onPress: 绑定一个this->自定义方法，把自己Pop掉。

11.ToastAndroid: 安卓提示信息

ToastAndroid.show('This is a toast with long duration',ToastAndroid.LONG)}>
String：显示的信息
ToastAndroid.LONG：显示时间：长
ToastAndroid.SHORT:显示时间：短

注意：在RN v18+ 以后的版本，会出现一个Bug，双击返回，关闭APP，ToastAndroid不会自动关闭问题（解决方案：请把源代码中的这个模块找到，拷贝到自己项目下app/src下，然后修改代码：ToastModule.Java，如网站中描述，修改文件ToastModule.java：https://github.com/tdzl2003/react-native/commit/bbf66e4bcd045026728bd8f867d854da91d48565，请把代码中public void run(){ 前面加一个public，不然会编译报错，修改这个MainReactPackage.java 文件中的包位置package当前目录，然后把MainActivity.java 文中的包，指向MainReactPackage.java申明的包，问题就解决了}
其原因就是在主线程以外的地方运行Toast.show会产生这样的BUG，需将这段代码在UI线程执行(用偷梁换柱之计，解决此问题)。

因为修改涉及到源代码，如果要在项目中修复，你可以自己复制一份MainReactPackage.java以及ToastModule.java，使用自己的ToastModule版本取代RN内置的版本，并进行对应的修改。我们已经测试过这种办法可以解决此问题。

12.SwitchAndroid：Android交换开关

<SwitchAndroid onValueChange={(value) => this.setState({falseSwitchIsOn: value})} style={{marginBottom: 10}} value={this.state.falseSwitchIsOn} />
onValueChange：在值改变的时候，重置state.
Value: 初始化默认值

13.ProgressBarAndroid：Android 加载动画

<ProgressBarAndroid styleAttr="Horizontal" />

styleAttr：进度条的样式，包括以下六种：
· Horizontal
· Small
· Large
· Inverse
· SmallInverse
· LargeInverse

14 DrawerLayoutAndroid：Android 右边浮动绘制层

<DrawerLayoutAndroid
drawerWidth={150}
drawerPosition={DrawerLayoutAndroid.positions.Left}
renderNavigationView={() =>navigationView}>
[内容部分]
</DrawerLayoutAndroid>

drawerWidth：绘制的宽度
renderNavigationView：绘制的视图，及左边布局的样子，元素
drawerPosition：绘制的方式：
· DrawerConsts.DrawerPosition.Left
· DrawerConsts.DrawerPosition.Right

15.navigator：场景切换函数

l push：导航到一个新的场景，挤压你当前任何场景 l replace：用一个新场景 替换 当前场景 l pop：回归上一个，并卸载当前场景。 l popToTop：弹出堆栈中的第一个场景，卸载其他场景 l popToRoute：弹出一个特定的场景，这之后所有的场景将被卸载 回传：但是navigator.pop() 并没有提供参数，因为pop() 只从 [路由1,路由2，路由3。。。]里，把最后一个路由踢出去的操作，并不支持传递参数给倒数第二个路由。 所以：这里要用到一个概念，把上一个页面的实例 或者 回调方法，作为参数传递到当前页面来，在当前页面操作上一个页面的state 或 调用方法。

16 . AsyncStorage：异步存储（键-值对存储，关闭APP后，仍然存储）
l 添加数据，代码如下：
AsyncStorage.setItem([key],[value])
.then(() => {debugger;})
.catch((error) => {debugger;}).done();
l 删除数据，代码如下：
AsyncStorage. removeItem([key])
.then(() => {debugger;})
.catch((error) => {debugger;}).done();
l 查询数据，代码如下：
AsyncStorage. getItem([key])
.then((value) => {debugger;})
.catch((error) => {debugger;}).done();
l then 返回的是正确（value: 查询的值），catch 返回错误（error.message:错误消息）

17 . WebView：浏览器组件（Android：0.17.0 以上，才支持，IOS：无限制）

<WebView
                    ref={WEBVIEW_REF}
                    automaticallyAdjustContentInsets={false}
url={this.state.url}                    onNavigationStateChange={this.navigationStateChange}
                    startInLoadingState={true}
                />

RN: < v0.19 以前的
l url：加载的网页URL 地址。
l html：加载静态网页HTML。
RN: >= v0.20 以上的
l source：提供以下，三种写法。
n 1. source={{uri: this.state.url}} URL地址
n 2. source={require(‘./helloworld.html’)} 请求静态HTML文件
n 3. source={{html: HTML}} 加载静态网页HTML
l 注意：他已经把url 和 html整合在一起了。
source扩展写法：

automaticallyAdjustContentInsets：自动调整内容内边距
onNavigationStateChange：导航状态发生改变时，如：(加载完成，加载中，加载错误)
startInLoadingState：初始化加载状态，（true：一打开页面，就加载、false：默认不加载）
用这个组件，可以做APP浏览器，或者是OAuth 开源认证，登录的功能。

17 . Animated：动画组件（Animated.Image, Animated.Text, Animated.View）

<Animated.Text
style={{
          fontSize: 26,
          fontWeight: 'bold',
          color: 'white',
          textAlign: 'center',
          transform: [                 // `transform` is an ordered array
            {scale: this.state.bounceValue}, // Map `bounceValue` to `scale`
          ],
          opacity: this.state.opacity
        }}
      >Douban Movie</Animated.Text>
React –-> Animated (动画模块，在React下)
Animated.spring:弹性动作（逐渐放大）
Animated.decay: 弹性动作（逐渐放大 后 缩小）
Animated.timing:平滑动作
duration：执行动画所花费的时间（ms）

                **Flexbox 弹性盒子布局**

flexDirection: ’row’、’column’ (子元素排列方式)

flexWrap:’wrap’,’nowrap’ (单行，多行，容器会自动换行，布局到下一行，自适应布局)

alignItem:’flex-start’,’flex-end’,’center’,’stretch’ (子元素，上下对齐方式)

justifyContent:’flex-start’,’flex-end’,’center’,’space-between’,’space-around’（子元素，左中右对齐方式，类似Word文字排列方式）

flex: 子元素，所占空间比列

alignSelf:’auto’,’flex-start’,’flex-end’,’center’,’stretch’ (单个元素对齐方式)

npm install（安装）、（npm uninstall卸载）如果不用了，建议卸载，否则会增加包大小
l adb命令：
n adb devices（查看adb管理的模拟器）
n adb reboot（重启：模拟器）
n adb remount（重新挂载系统分区）
以下是第三方控件（注意：第三方控件，也许会存在很多问题，甚至致命性的错误 和Bug，导致项目不能构造，有些问题需要自己解决，本文最后，提出了一些常见的错误解决方案）：
l splashscreen（欢迎荧屏）：
n 安装1: npm install @remobile/react-native-splashscreen –save
n 注意：Installation (Android)下面的，是修改文件：[项目]\android\ settings.gradle 追加在后面。
n 添加自己的图片需要注意（添加后重新部署、添加必须是png，不能将jpg改成png，这种操作，否则会导致部署报错、注意尺寸）
n 详细步骤：https://github.com/remobile/react-native-splashscreen
n 效果如图：

l React Native Dialogs（系统对话框[RN:v 0.18,建议使用系统的，此插件有bug]）：
n 安装1：npm install @remobile/react-native-dialogs –save
n 详细步骤：https://github.com/remobile/react-native-dialogs
n 步骤中，可能会遇到错误（3、4、5、6）
l React Native ImagePicker（调用相册，选择图片）：
n 安装1：npm install @remobile/react-native-image-picker –save
n 详细步骤：https://github.com/remobile/react-native-image-picker
n 步骤中，可能会遇到错误（7、8、9）
n 选择后，如何显示选择的图片，请使用map，state 和array，实现此功能，map，在0.17.0以后，遍历的元素，需要带上key，否则会有警告提示。
l React Native Sqlite（使用本地数据库）：
n 安装1：npm install @remobile/react-native-sqlite –save
n 详细步骤：https://github.com/remobile/react-native-sqlite
n 按照网上步骤走，这个插件，没有问题。
l React Native FileTransfer（文件上传、下载）：
n 安装1: npm install @remobile/react-native-file-transfer –save
n 详细步骤：https://github.com/remobile/react-native-file-transfer
l React Native Camera（调用：摄像头，捕获图片 并 编辑）：
n 安装1：npm install @remobile/react-native-camera –save
n 详细步骤：https://github.com/remobile/react-native-camera
l 使用Android （GPS 功能）：
n 配置xml：android\app\src\main\ AndroidManifest.xml，添加如下代码：
n 如图所示：

接下来用法：http://wiki.jikexueyuan.com/project/react-native/geolocation.html
l 使用谷歌地图组件（react-native-gmaps）：
n 先为模拟器安装1：Genymotion-ARM-Translation_v1.1.zip
n 命令：adb reboot，重启模拟器。
n 在安装2：gapps-kk-20140105-signed.zip
n 命令：adb reboot，重启模拟器，（下面建议）。
n 在VPN下面，注册谷歌账号，登录Google Play，成功后搜索一下（Google Drive）。
n 注册请在（VPN + chrome访问）：chrome://chrome-signin/?source=8&constrained=0&frameUrlId=1&auto_close=1&showAccountManagement=1
n 启动后，会自动安装（Google Play Services）
n 安装完成后，获取属于自己的api-key: https://developers.google.com/maps/documentation/android-api/signup?hl=zh-cn
n 更多实例：https://developers.google.com/maps/documentation/android-api/
n 其它安卓版本，安装（Google Play Services）：
u http://opengapps.org/ or 下面链接
u https://www.androidfilehost.com/?w=files&flid=5648
n 执行安装：npm install react-native-gmaps –save
n 第三方库：https://github.com/teamrota/react-native-gmaps
n 常见错误（5）
l 二维码显示插件（react-native-qrcode）：
n 安装1：npm install react-native-qrcode
n 详细步骤：https://github.com/cssivision/react-native-qrcode
l DES 加密、解密（React Native Des）：
n 安装1：npm install @remobile/react-native-des –save
n 详细步骤: https://github.com/remobile/react-native-des
l 单选项（react-native-simple-radio-button）：
n 安装1：npm i react-native-simple-radio-button –save
n 详细步骤，样式局部，可能需要调整：https://github.com/moschan/react-native-simple-radio-button
l 访问剪贴板（Clipboard）：
n React –-> Clipboard(原生框架自带)
n
n 网址信息：https://github.com/facebook/react-native/blob/90c7ad112f9e53dc6c71c8f47ea2a31b41d06141/Examples/UIExplorer/ClipboardExample.js
l 推荐：第三方 按钮组件（apsl-react-native-button）：
n 安装1：npm i apsl-react-native-button –save
n 提示：可实现，加载，颜色变化，Metor 风格 和 禁用（disable）
n 更多资料：https://github.com/APSL/react-native-button
l 发送/派遣 指令给系统（react-native-send-intent）：
n 安装1：npm install react-native-send-intent –save
n 能做以下功能：1.信息分享、2.发送短信、3.发送电话（呼叫/不呼叫）、4.添加日历事件、5.打开日历事件
n 更多资料：https://github.com/lucasferreira/react-native-send-intent
l 扫描 条码、二维码（react-native-barcodescanner）：
n 安装1：npm i –save react-native-barcodescanner
n 配置权限：把下面，拷贝到文件AndroidManifest.xml 中：
n
n 页面引入组件，BarcodeScanner 必须是跟路径，最好另添一个页面。
n 详细步骤：https://github.com/ideacreation/react-native-barcodescanner
l 自定义徽章,可拖拽删除（未测试）（react-native-bga-badge-view）：
n 安装注意：没有托管到npm上，需手动下载项目，移植到node_modules里
n 更多详情：https://github.com/bingoogolapple/react-native-bga-badge-view
n

使用第三方图表ichartjs（react-native-ichart）：
n 安装1：npm i react-native-ichart –save
n Android不能使用，需要修正（node_modules/react-native-ichart/ index.js）
n 需要使用RN：v 0.18.0 以上的版本。
n 需要开启WebView：javaScriptEnabledAndroid={true}、domStorageEnabledAndroid={true} 和startInLoadingState={true}
n 需要从外部引入js 如下所示：
u
u 库的位置：http://www.ichartjs.com/ichart.latest.min.js
n 更多资料：https://github.com/AdonRain/react-native-ichart
l 滑动块（react-native-slider）：
n 安装1：npm i –save react-native-slider
n 更多资料：https://github.com/jeanregisser/react-native-slider
l 系统的弹出菜单（react-native-simplemenu-android）：
n 安装1：因未托管npm，可以从github上下载源码，拷贝到node_modules，照资料里的文档配置，就可以使用了，资料如下：
n 更多资料：https://github.com/q-m/react-native-simplemenu-android
l 下拉选项框（react-native-dropdown-android）：
n 安装1：npm install –save react-native-dropdown-android
n 更多资料：https://github.com/chymtt/ReactNativeDropdownAndroid
l 进度条组件（react-native-progress）：
n 安装1：npm install react-native-progress –save
n 更多资料：https://github.com/oblador/react-native-progress
l Image 图片加载进度（react-native-image-progress）：
n 先，安装1：npm install react-native-progress –save
n 在，安装2：npm install –save react-native-image-progress
n 更多资料：https://github.com/oblador/react-native-image-progress
l Android状态栏，控件（react-native-android-statusbar）：
n 安装1：npm i –save react-native-android-statusbar
n 更多资料：
n https://github.com/NishanthShankar/react-native-android-statusbar
l 分享链接组件（react-native-share）：
n 安装1：npm i –save react-native-share
n 更多资料：https://github.com/EstebanFuentealba/react-native-share
l 推送通知（本地 或 网络）（react-native-push-notification）：
n 安装1：npm i –save react-native-push-notification
n 更多资料：https://github.com/zo0r/react-native-push-notification
l 智能验证框架（tcomb-form-native）：
n 安装1：npm install tcomb-form-native –save
n 官方仅支持IOS（Android请使用RN v0.19，并覆盖：bootstrap 文件夹）
n 更多资料：https://github.com/gcanti/tcomb-form-native
l 图标集合组件（react-native-vector-icons）：
n 安装1：npm install react-native-vector-icons –save
n 注意：在RN v0.18 or later 版本，请使用它。
n https://github.com/oblador/react-native-vector-icons#bundled-icon-sets（更多图片样式，竟在这些网页）
n 更多资料：https://github.com/oblador/react-native-vector-icons
l 滚动Tabs 面板（react-native-scrollable-tab-view）：
n 安装1：npm install react-native-scrollable-tab-view –save
n https://github.com/brentvatne/react-native-scrollable-tab-view#props（更多使用方式，请看此API）
n 不带滑动翻页，请使用：react-native-tabs
n 更多资料：https://github.com/brentvatne/react-native-scrollable-tab-view
l Flux 下的Router 组件（react-native-router-flux）：
n 安装1：npm install react-native-router-flux –save
n 如下代码： import {Router, Route, Schema, Animations, TabBar, Actions} from ‘react-native-router-flux’;
n 注意：它搭配（react-native-tabs）使用，但自身代码上，存在问题，可用以下覆盖：https://github.com/LynxITDigital/GeoEncoding 项目中的\node_modules\react-native-router-flux 去覆盖自己项目中的…
n 更多资料：https://github.com/aksonov/react-native-router-flux
l 打星星，评价组件（react-native-star-rating）：
n 安装RN 0.16以上：npm install react-native-button –save
n 安装(含)RN 0.16 以下：npm install react-native-star-rating –save
n 注意：支持半颗星，不支持滑动 打分，RN:0.16 以上的，请安装react-native-button，然后用我项目中的Component\StarRating.js，去用。
n 更多资料：https://github.com/djchie/react-native-star-rating
l Android 手机震动（react-native-vibration）：
n 安装1：npm i –save react-native-vibration
n 更多资料：https://github.com/ideacreation/react-native-vibration
l 热更新 技术（react-native-code-push）：
n 安装1：npm install –save react-native-code-push
n 注释：用于修复紧急补丁，重启app，替换有问题代码，而无须重新发布apk。
n 更多信息，请看热更新，最后一章节，专门讲述（文档最下面）。
n 更多资料：http://microsoft.github.io/code-push/docs/react-native.html
https://github.com/Microsoft/react-native-code-push
l 获取缓存大小、清除缓存（react-native-http-cache）：
n 安装1：npm install react-native-http-cache –save
n 更多资料：https://github.com/reactnativecn/react-native-http-cache
l 邮件发送（react-native-mail）：
n 安装1：npm i –save react-native-mail
n 注意：它调用了系统的邮件发送机制，可用作反馈问题，等功能作用。
n 更多资料：https://github.com/chirag04/react-native-mail
l 视频播放器（react-native-video）：
n 安装1：npm install react-native-video –save
n 注意：它可播放 本地 或 流媒体，需自己设计播放控件，如：（暂停，播放，进度条，时间显示，全屏 等等功能）。
n 更多资料：https://github.com/brentvatne/react-native-video
l 日期选择器（react-native-datetime-picker）：
n 安装1：npm install @remobile/react-native-datetime-picker –save
n 安装2：npm install @remobile/react-native-simple-button –save
n 修改文件，如下图：node_modules\@remobile\react-native-datetime-picker\libs\ios

其它修改（Java 和 配置文件），必须删除APP后，重新部署，使用方式，请看网站
https://github.com/cnjon/react-native-datetime-picker
l 单选框（可做：级联功能）：
n 安装：npm install react-native-picker-android –save
n 导入一个公用组件之后，如果下图这样使用组件：

https://github.com/beefe/react-native-picker
l 图片轮播(react-native-swiper2)：
n 安装：npm i react-native-swiper2 –save
n 资料可查阅下面文档http://npm.taobao.org/package/react-native-swiper2
https://github.com/vczero/react-native-lesson/blob/master/%E7%AC%AC4%E7%AF%87React-Native%E5%B8%83%E5%B1%80%E5%AE%9E%E6%88%98%EF%BC%88%E4%BA%8C%EF%BC%89.md
https://github.com/leecade/react-native-swiper
l 打开外部浏览器(RN v0.19 以下的)
n 使用对象IntentAndroid（React –> IntentAndroid）
n React 下面的IntentAndroid 实例代码。
IntentAndroid.canOpenURL(url, (supported) => {
if (!supported) {
console.log(‘Can\’t handle url: ’ + url);
} else {
IntentAndroid.openURL(url);
}
});
l 打开外部浏览器(RN v0.20 以上的)
n IntentAndroid 已经标记为弃用（deprecated）
n 请使用Linking对象（React –> Linking）
n Linking 对象返回 Promise，代码如下：
n 或者是这样

                     **常见错误**

l 1.如果npm install，出现这个错误：
请安装：Microsoft Visual Studio Express 2013 for Windows Desktop，再次运行 ，可成功。

l 2.如果出现下面，这个错误：请安装Python27后，配置环境变量，方可成功。
l 3.如果安装遇到这个错误，缺少依赖包，注意它提出的版本号

请安装他提示的版本，再安装你要安装的，以下是：react-native run-android的错误
l 4.如果出现这个错误，不能找到npm 安装，依赖的项目。

请在自己项目下settings.gradle，配置依赖的项目，最好依赖的放到前面

l 5.如果出现这个错误，代表：实例化的类 和 导入的包不同。

l 6.如果出现这个错误，代表实例化构造方法，需要把this，传进去。

[错误代码] 如下图所示：

l 7.如果遇到下图这个错误，请修改（settings.gradle –>路径：…/android/）,去掉后面的即可。

l 8.如果遇到下图这个错误，请导入包（import android.content.Intent）：

l 9.如果遇到以下错误，请安装（npm i @remobile/react-native-cordova –save）

IOS平台（外部安装包，环境搭建）
1. 在 XCode 中打开你的项目, 右击Libraries 选择Add Files to “项目名”
（用RCTVideo项目，而非图片中显示的截图）
2.添加 libRTCVideo.a 到 Build Phases -> Link Binary With Libraries
3. 在Build Phases -> Copy Bundle Resources中，添加视频文件 .mp4.
4. 现在，你就可以在项目中使用: var Video = require(‘react-native-video’);
5. 更多描述 或 安卓的配置参看文档：https://github.com/brentvatne/react-native-video
Google Play Services
l 1.Google Map项目，APP用了Google Play Services，而机器没有安装：Google Play Services，在react-native run-android命令下，会报：type 3 错误。

l 初次使用会提示用户升级（Google Play Services），升级过程，需要用VPN下载，大约40多兆的文件大小。

Watchman version（v0.17建议改）
l 默认是25000, 改大：MAX_WAIT_TIME（如：120000）
文件位置：
\node_modules\react-native\packager\react-packager\src\FileWatcher\index.js
\node_modules\react-native\packager\react-packager\src\DependencyResolver\FileWatcher\index.js(新版本，在这儿（0.18.0），默认值，比较高)
官方网站：http://facebook.github.io/react-native/docs/troubleshooting.html
http://reactnative.cn/docs/linux-windows-support.html#content
l 这个错误属于，模块是es6创建的，引入是es5（require(‘./IChartDemo’)）

l 这个错误，如图代码，可以解决（ES6静态结构，必须要 ; 号结束）。

l 另外（RN：v0.18.0） 和 （RN：v0.17.0）下面文件，会有区别
n android\app\src\main\java\com\myproject\MainActivity.java

上图是：（RN：v0.18.0,添加、导入 第三方包）

上图是：（RN：v0.17.0,添加、导入 第三方包）

l ES6 和 ES5，在（React-Native）项目中的对照表，请参考
http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8

             **热更新技术（Microsoft CodePush）**

1. 全局安装：npm install -g code-push-cli（命令才有：code-push）
2. 查看code-push版本：code-push –v

1. 注册 code-push：code-push register（它会打开网站，请登陆后，在注册code-push https://codepush.azurewebsites.net/auth/register?hostname=USER-20150604HH，注册后，会生成 token，如下填写，就OK）

2. 向code-push添加一个APP：code-push app add

3. 把生成的Key，填写到new CodePush([Key], this, BuildConfig.DEBUG); 代码中，代码在：MainActivity.java 文件中。

4. 查看code-push发布的列表：code-push deployment ls MyApp -k

5. 查询更新，重启APP，获取更新描述，请查阅资料：
   建议放在：应用程序启动，在设置页面的点击按钮中，定期在某个固定的时间间隔，获取推送更新。

6. https://github.com/Microsoft/react-native-code-push
   http://microsoft.github.io/code-push/docs/react-native.html

                **Code-Push发布APP更新**
   

7. 发布APP更新
   Ø 1.只发布JavaScript更新（JavaScript-only）
   l 1.打包成bundle JS压缩文件，react-native bundle –platform android –entry-file index.android.js –bundle-output codepush.js –dev true（–dev:true 会提示所有 黄色警告，否则 不会）
   l 2. 使用code-push 发布：code-push release MyApp codepush.js 1.0.1
   如：code-push release MyApp codepush.js 1.0.2 -d Production –des “Description,My is OK”

-d Production：指定发布分支，默认会发布到 [Staging] 分支下
–des: 发布描述，默认（空）字符串

版本号，必须带上，发布版本，只能 大于 服务器版本，否则（小于、等于）会报下面错误：

发布进度条，返回Successfully，代表当前发布成功，如图：

注意：分支，只会显示最后一个发布版本，如图：

Ø 2.发布JavaScript + Images（JS + 资源文件）
l 1.在项目目录下，创建一个文件夹（列如：release）
l 2.执行react-native bundle –platform android –entry-file index.android.js –bundle-output ./release/main.jsbundle –assets-dest ./release –dev false
l 注意：输出文件，必须是（.js or .jsbundle）结尾，其它扩展名，将导致失败，这里多了一个，–assets-dest：资源输出目标文件夹
l 3.执行代码推送：code-push release MyApp ./release 1.0.0
l 注意：代码推送，将自动压缩（zipping）你的目标文件夹，并上传。
API：https://github.com/Microsoft/react-native-code-push#api-reference
注意：发布JavaScript + Images，必须是RN：v0.19+，code-push: v1.7.0 以上的版本。