1.zIndex
在Android上使用zIndex来控制组件的层级,会遇到元素不显示的问题。
解决方案:
尽量改变组件的顺序,而不用zIndex
尽量不要使用zIndex来控制组件的层级,默认情况下,使用position: 'absolute'
后,后面的元素会默认覆盖在前面的元素之上。所以删除zIndex,改变一下组件的顺序就OK啦。
issues: https://github.com/facebook/react-native/issues/8968
2.borderStyle:'dashed'
目前,Android上,如果想要实现一条水平方向的虚线,一开始想到的肯定是:
border: {
borderColor: 'red',
borderWidth: 0,
borderBottomWidth: 1,
borderStyle: 'dashed'
}
但是实际上,这样是不会生效的,目前Android还不支持某一边设置虚线。
解决方案:
方案一:假设我们想要一个线宽为h的水平虚线,设置一个高度为h的view,里面给一个view
设置四边都是dashed
的边框,borderWidth
为h,高度为0,然后外层设置overflow: 'hidden'
但是,你会发现,不管你怎么overflow,都是没用的,Android照样会渲染出两个边框,看起来overflow也没有起作用。
方案二:换一种思路,再弄一个view,高度为h,背景颜色设置成你想要的颜色,然后把下面的border覆盖掉。
此外,也可以关注下这个issue: Border is invisible when using borderStyle='dashed' with borderBottom #7838
3.TouchableOpacity等可点击组件,有时候点击不触发onPress
这个问题,如果你只是在代码里面放了类似下面的代码:
<TouchableOpacity
style={styles.btn}onPress={this.onPress.bind(this)}>
<Text>立即预定</Text>
</TouchableOpacity>
并且onPress回调里面,并没有做太多的逻辑,或者导致重新渲染。
那么,你没有必要怀疑是你代码的问题。RN对部分国产手机那些自定义的手势支持不好。
4.[style]Android上Text默认的字体颜色,不是black,不是black,不是black
如果在Android上面,不显示地给Text添加color,那么显示出来的字体颜色就是灰色。跟iOS的表现不一致;
解决方案:
方案一:给每个Text都设置color
不足:每次都设置color。比较繁琐
方案二:写一个自定义组件
比如MyText,这个Text设置颜色,每次使用xxx就默认为你设置的颜色了。
不足:多出来了一个新的组件,也比较繁琐。
多出来了一个新的组件,也比较繁琐。
方案三:设置默认props
在入口文件里面写上默认的style,比如:
Text.defaultProps.sytle = { 'color': '#212121'}
5.[ListView] renderRow 使用 this.state.xxx 属性,setState({xxx:'xxx'})的时候 ListView没有重新渲染
解决方案 重新设置 ListView 的 dataSource
6.[console] console.log()打印出来的对象,值不是最准确的,可能会受后面执行代码的影响。
7.[网络请求] 安卓机型连代理,有时抓不到请求
RN-andriod 用的网络模块是okhttp。这个模块有一个类似代理路由的功能。通过代理(比如charles)发送一个请求时,如果该请求timeout或者error了(比如abort),okhttp在下次发送请求时可能不走charles。导致请求发出去了,但是charles抓不到。
8.[ios模拟器] 配置localhost:port之后,请求不到js
如果没有提示说服务没有启动,提示404。基本上就是你电脑上没有配置localhost对应的host。可能有写hosts工具切换的时候,把localhost弄掉了。自己加回来:
127.0.0.1 localhost