react native常见的错误

转载 2016年06月01日 10:28:18

更多组件: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 以上的版本。

相关文章推荐

React Native 学习笔记二十一(导航器三方 插件学习)

所有的app设计,都会考虑导航的问题,android一般采用底部tabbar,但是最新的设计方案,更多的倾向于头部tabbar,或者头部scrollTabBar。本方案还是采用底部模式。 r...

React-Native 集成AMap实例

前言地图、定位对于移动开发来说不可或缺,下面尝试封装高德地图作为 React-Native组件...

React-Native常见错误

rn开发遇到的问题本人之前Android开发的,换了一个工作环境之后,新的项目需要利用react native开发,就重新开始学,对于刚接触rn,经常遇到一些莫名其妙的坑,rn提示的错误信息有时不是很...
  • hldHema
  • hldHema
  • 2017年03月27日 22:04
  • 113

Win10下React Native环境安装教程及错误处理办法(实测)

准备工作注意:小米手机MIUI有坑,文末有解决方法首先,你需要先安装Node.js并进行环境变量的配置,具体可以参考我的另一篇文章nodejs在windows下的安装配置(使用NVM的方式),或者你也...

windows平台react-native && android安装错误Error EPERM

1、初始化项目react-native init newProject2、手机连上usb口,在手机上的开发者模式中打开usb调试,如果手机屏幕出现提示密钥消息,点击确定。3、对于Android5.0或...

《React-Native系列》17、 RN中this所引起的undefined is not an object错误

在我们编写RN代码的时候经常会出现一个错误,undefined is not an object(evaluating 'this.refs' ). undefined is not an objec...

在真机上执行react-native run-android出现com.android.ddmlib.InstallException: Failed to finalize session错误

配置好react-native的环境,并且在虚拟机上能够正常运行,但在真机执行react-native run-android的时候出现如下错误:Unable to install D:\worksp...

react native 错误总结(不定时更新)

错误截图: 原因:lineHeight只能设置成整数  可以使用parseInt(23.7)进行取整操作...

React Native开发错误警告处理总结(持续更新)

注: 本文是我在开发过程中遇到问题解决方法的总结,文中有不妥的地方希望指出共同学习,之后会持续更新,希望帮助到更多的学习者。 Error Set Error1 本地静态图片无法加载展示 Error2...

React Native运行Android时提示要下载: gradle-2.4-all.zip 引发的一系列错误

一、问题描述 react-native虚拟服务器启动成功后,运行android项目 react-native run-android 二、解决方法 提示需要下载需要下...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:react native常见的错误
举报原因:
原因补充:

(最多只允许输入30个字)