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 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 如图所示：

 

接下来用法：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 <uses-permission android:name="android.permission.CAMERA" />

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 

 

l 使用第三方图表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 <script type="text/javascript" src="…"></script>

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

 

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

 

4. 向code-push添加一个APP：code-push app add <MyApp>

 

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

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

 

7. 查询更新，重启APP，获取更新描述，请查阅资料：

建议放在：应用程序启动，在设置页面的点击按钮中，定期在某个固定的时间间隔，获取推送更新。

8. https://github.com/Microsoft/react-native-code-push

http://microsoft.github.io/code-push/docs/react-native.html

Code-Push发布APP更新

9. 发布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  以上的版本。