react-native实践和相关问题

[creeperyang]

布局和相关问题

非特别说明，react-native版本是0.42。

1. Android中borderRadius和border冲突？

Android中当borderRadius部分设置非0值（部分为0），border将无效。

手机：华为mate8
EMUI：4.1
android：6.0

iOS上正确的样式：

然后发现删除style

    borderTopLeftRadius: 4,
    borderBottomLeftRadius: 4,
    borderTopRightRadius: 0,
    borderBottomRightRadius: 0

可正常显示border。

解决方案

把border放在两个按钮的父容器上。

[creeperyang]

2. Android 上 overflow 默认 hidden 且无法改变

即超出容器部分被裁切，细节可看The overflow style property defaults to hidden and cannot be changed on Android。

iOS 可以支持 overflow: visible等其它值，这点需注意。

[creeperyang]

3. Android 上字体偏下的问题

第一张是iOS的，第二张是android的，可以看见，第二张的border和文字明显贴的过近。

inspect相应元素，可以发现，是android上文字在垂直方向上偏下。

解决：

{
   paddingBottom: 4,
   fontSize: 14,
   lineHeight: 14,
   height: 14
}

用paddingBottom保证不会贴在一起，容忍android上损失一点还原度...

[creeperyang]

4. TouchableHightlight 必须注册 onPress 回调，否则不显示 underlayColor

详情见： facebook/react-native#14908

<TouchableHighlight underlayColor="red">
</TouchableHighlight>

如果不注册 onPress 回调，TouchableHighlight看起来手指按压时无反应，原因即：

_showUnderlay: function() {
-    if (!this._isMounted || !this._hasPressHandler()) {
+    if (!this._isMounted) {
        return;
      }

[creeperyang]

5. flexbox 实现等宽布局

如下，希望交通工具图标下面的实线／虚线可以等宽，且无法直接设置两者宽度。

一般情况下，好像没什么问题，直接设置flexGrow即可。

line: {
  flexGrow: 1,
  height: 4,
  backgroundColor: '#BDC6DB'
}

但问题是虚线的实现采用了很 trick 的方法：line 内部排列一个个小 View，line 本身背景色透明。

这时有个严重问题，右侧虚线被撑开了，实现和虚线不再是等分的。

所以，在 dom 内部内容宽度可能很大时，怎么实现等分？

line: {
  flexGrow: 1,
  flexShrink: 1,
  flexBasis: 0,
  height: 4,
  backgroundColor: '#BDC6DB'
}

以上即可解决：

flexBasis: 0 保证宽度计算都是从 0 开始，此时内容的宽度的影响就被去除； flexGrow: 1,flexShrink: 1, 保证始终等分。

[creeperyang]

6. Android 上 width 为 Infinity 导致的 UI 问题

<View style={styles.container}>
    {
        list && list.map(v => (
            <View style={[styles.item, {width: WIDTH / list.length}]}></View>
        ))
    }
</View>

如上，假设我们有个 list 要渲染（item 宽度平分 WIDTH）。直觉看来上面的没有任何问题，并且在 iOS 上也的确没有任何问题。

但在 Android 上，由于 list 初始时可能是空数组（长度 0），所以初始时宽度设置为 {width: Infinity}，当我们后面有数据了（长度大于 0），View 却始终不显示！

所以切记，任何时候不要在 Android 上设置 {width: Infinity} 或其它非法值。