RN 兼容性集录

RN 兼容性

1.android-子元素超出父级元素内容区域，点击事件无法响应。

在android里面，有时候会遇到这种场景，给父级元素一定的宽和高，给子级元素绝对定位，并把子级元素定位到父级元素之外，此时你会发现，当你给子级元素添加点击事件的时候，点击事件无效。这是因为在android里面子元素超出父级元素内容区域后，是无法响应事件响的

示例：

解决方案：juejin.cn/post/699025…

2.display:'none'｜‘flex’做隐藏显示效果在ios低版本里面无效。。

场景：有时候我们希望将某些元素提前渲染出来，但是又不想过早的展示在界面上，只有等符合某个条件时，再去展示。也就是说要做显示和隐藏功能功能。

我们首先想到的是用display:'none'|'flex'属性来实现。这个属性确实可以实现这一功能，但是在ios低版本里面存在兼容性问题，不管我们如何切换display的值，始终不可见。我们可以通过设置宽高来达到隐藏效果，但是这里需要注意，如果我们设置了padding,即使将宽高设置成0，依然会显示一部分，所以要将宽高设置成0.

const hidden: ViewStyle = {
  flex: 0,
  height: 0,
  width: 0,
  paddingTop: 0,
  paddingBottom: 0,
  paddingLeft: 0,
  paddingRight: 0,
  overflow: 'hidden',
};

3.在ios低版本里面，当我们使用这种方式来切换样式时，如：boolean ? style1:style2,可能会导致样式不生效

const style1={
    height:100,
    width:100,
}
const style2={
    height:200,
    width:200,
    backgroundColor:"red"
}

<View style={toggle ? style1:style2}></View>

//当我们来回改变toggle的值时，我们会发现背景色并没有改变。

//但是我们如果这样写,背景色会随toggle的值改变：
const style1={
    height:100,
    width:100,
    backgroundColor:"blue"
}
const style2={
    height:200,
    width:200,
    backgroundColor:"red"
}

<View style={toggle ? style1:style2}></View>


//猜测出现的原因：样式叠加覆盖而不是清除，类似于下面的扩展运算符，属性为undefined时不会覆盖之前的属性
//toggle为true
style={...style1};
//toggle为false
style={...style1,...style2};
//toggle为false
style={...style1,...style2,...style1};

4.RN的modal弹窗在ios里面同时弹出两个会导致页面渲染阻塞，直接卡死

建议使用第三方组件库react-native-root-modal

解决方案：www.jianshu.com/p/5a154ca53…

5.RN的modal弹窗在某些android里面(如小米10),遮不住刘海屏，有的手机上下都有刘海，如果给弹窗设置了遮罩曾，刘海部分是不会被遮罩的（鉴于RN提供的modal组件的诸多问题，建议用网上成熟的modal库）

解决方案：建议使用第三方组件库react-native-root-modal

6.TextInput组件在oppo手机或一些低端机型中，onTextChange方法响应比较慢，且不会每输入一下就触发一次，可能只有第一次和最后一次触发，跟防抖差不多

7.TextInput组件在oppo手机里面设置文字右对齐，此时如果设置了placeholder，点击聚焦时，光标会停在placeholder左边

示例：

解决方案：聚焦时，将placeholder置空，失焦时，恢复placeholder。

8.在小米手机上，数字可能会莫名缺失

这是由于小米系统自带的兰亭Pro字体在RN中显示有问题。

示例：

如上图所示斜杠后面应当显示20，但是并没有显示出来。这种文字缺失是随机的，可能下次在看，19不能显示，20可以显示
这种缺失目前只出现在数字类型上

解决方案：

//给所有数字的字体设置为''

{ fontFamily: '' }

9.ios里面给inputText组件设置autoFocus，自动聚焦，页面被顶上去，但是失去焦点之后，页面不会下来。解决方案：不使用autoFocus，手动聚焦

useEffect(() => {
    //聚焦
    setTimeout(() => {
    inputEl.current && inputEl.current?.focus();
    }, 100);
  }, []);

RN 兼容性问题

RN 兼容性集录

RN 兼容性