React-Native近期采坑小结

Posted 2020-10-16

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