自从2016年接触reactnative后,就是一把辛酸泪,各种的不适用和坑,还好,我挺过来了。废话少说,开始说说那些坑。
一、报错500或者could not ….server
这个问题一般是没有启动RN服务,打开一个控制台切到当前项目下,输入react-native start回车就行了。
二、navigation
(1)使用跳转需要在app初始化跳转时,将navigation注入到Component中
_
renderScene(route, navigator) {
let Component = route.component;
return (
<Component {...route.params} navigator={navigator}/>
);
}
render() {
// 导航栏的Mapper
return (
<Navigator
initialRoute={{
name: 'WelcomePage',
component:WelcomePage
}}
renderScene={(e, i)=>this._renderScene(e, i)}
/>
);
}
在reactNative
版本0.43.0之前使用navigation只需要从'react-native'
中引入,但是从0.44.0版本之后,就不行了,我也是看了好久,一脸闷逼的不知道什么情况,从别人的github上clone下来的代码能运行,我的就不行了,最后才搞明白是版本的问题
解决方法:换了一个引入
import {
Navigator,
}from 'react-native-deprecated-custom-components'
三、图片自定义
有时候为了方便,自定义一个公共的Head,那么有些操作的图片需要自定义,这个时候就要传值.
错误的:将图片路径做完传值的参数,但是会报错,说找不见传值路径的图片
<Image
style={styles.rightImage}
source={require(this.props.imageUri)}/>
正确的:
<Image
style={styles.rightImage}
source={this.props.imageUri}/>
传值: imageUri:require('../../res/image/ic_action_today.png')
四、样式
对于flex样式支持:
- 1.alignItems 垂直方向
用来定义伸缩项目在交叉轴上的对齐方式,语法:
alignItems:flex-start(默认值) | flex-end | center | stretch
- 2 alignSelf
用来设置单独的伸缩项目在交叉轴上的对齐方式,会覆盖默认的对齐方式,其语法为alignSelf:auto | flex-start | flex-end | center | stretch(伸缩项目在交叉轴方向占满伸缩容器,如果交叉抽为垂直方向的话,只有在不设置高度的情况下才能看到效果)
- 3.flex
是flex-grow flex-shrink flex-basis 这三个属性的缩写,其语法为: flex:none | flex-grow flex-shrink flex-basis,其中第二个和第三个参数为可选参数默认值为0 1 auto
- 4.flexDirection
指定主轴的方向 flex-direction: row | row-reverse | column(默认) | column-reverse
- 5.flexWrap
默认情况下,项目都排在一条线(又称”轴线”)上。flexWrap属性定义,如果一条轴线排不下,如何换
- 6.justifyContent 水平方向
其他属性
- 1.设置背景用:backgroundColor,不要用background
- 2.设置字体颜色:在
<Text/>
标签里面设置样式,设置color,不要设置textColor - 3.设置数值,不要写单位
五、props和state
props用在对外,设置自定义的属性,State对内,设置数据
在设置这两个值的时候,不要在render渲染的时候更新,由于在render渲染的时候要调用这两个值,如果在这时更新值,就会造成死循环
错误的
<Button onPress={hideMessage('隐藏信息')}>隐藏信息</Button>
正确的:
<Button onPress={()=>{hideMessage('隐藏信息')}}>隐藏信息</Button>
六、热更新
RN特性热更新,其实原生开发也有热更新了,来说说RN热更新
Android原生App中我们实现热修复有很多种选择:Tinker、hotFix、Qzone的热更新等等。基本的思路都是大同小异的。React Native中的热更新有点像App的版本更新,也就是根据查询server端的版本和手机端目前App的版本进行对比,然后来执行是否更新的操作。
根本原因在于React Native的加载启动机制:React Native会将一系列资源打包成js bundle文件,系统加载js bundle文件,解析并渲染。所以,React Native热更新的根本原理就是更换js bundle文件,并重新加载,新的内容就完美的展示出来了。微软为我们提供了CodePush来简化热更新的操作,但是由于速度等原因在国内并没有备受青睐
更新流程图
上面流程图中展示了如何实现更新的步骤,可以总结为如下几点:
进入App根据版本检查是否需要更新:
(1)更新:
下载最新JsBundle文件以及所需要的图片资源等,下载完成后解析最新JsBundle文件。
(2)不更新:
判断本地是否还有缓存的JsBundle文件:
1>存在:
本地存在JsBundle,即有过热更新操作。那么App直接加载在缓存目录下的JsBundle文件。
2>不存在:
本地不存在JsBundle,即之前从未有过热更新操作。那么App只能使用初始化时打包在assets目录下的index.android.bundle文件。
大家可能会说,如果bundle太大的情况下怎么办呢?没错,这个问题同样在博客开始也提到了。打包成zip也是为了减小更新文件体积,减少用户流量消耗,同样,我们也可以生成用生成补丁包的方式来进一步减小更新包zip的体积。
初始项目发布时,生成并保留一份index.android.bundle文件。
有版本更新时,生成新的index.android.bundle文件,使用google-diff-match-patch对比两个文件,并生成差异补丁文件。app下载补丁文件,再使用google-diff-match-patch和assets目录下的初始版本合并,生成新的