React-Native近期采坑小结

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React-Native近期采坑小结相关的知识,希望对你有一定的参考价值。

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

以上是关于React-Native近期采坑小结的主要内容,如果未能解决你的问题,请参考以下文章

react-native学习小结

React-Native 知识点小结

React-Native 知识点小结

使用 Relay 和 React-Native 时的条件片段或嵌入的根容器

近期小结

近期小结