React Native 适配问题汇总

1. 小米手机上存在文字截断的问题

  描述：

  居中对齐的Text在水平方向上会缺失最后一个字

  设置了行高的Text在垂直方向上最后一行会被截断

  原因：小米使用了自定义的字体，从而造成了该问题

 

 解决方案：

针对android设备统一把字体设置成android默认字体     fontFamily: 'DroidSansFallback'

2.在Android上图片的容器被设置成圆角和 overflow:'hidden' 后，图片不会显示成圆角

原因：该0.41版本的RN在android上对圆角的支持有缺陷

解决方案：

额外的个图片设置圆角属性(注意：这里是属性不是样式，图片的圆角样式不生效的)

<Image borderRadius={20} />

// or
<Image borderTopLeftRadius={20} borderTopRightRadius={20} />

3.在Android上View组件的ref有时会获取到是undefined

原因：android默认的机制是实际渲染中不会渲染不影响布局的View, 因此如果你ref的视图刚好被忽略了，就无法获取到了

解决方案：全局禁用改特性，在 Global.js 中全局禁用改特性

let originalViewDefaultProps = View.defaultProps;
View.defaultProps = {
...originalViewDefaultProps,
collapsable: false,
};

4.在RN中如何用样式写三角形？

triangle {
width: 0,
height: 0,
borderWidth: 7, // 等腰三角形底边长度
borderColor: 'transparent',
borderTopColor: '#FF9F82', // 向下的三角形
// borderBottomColor: '#FF9F82', // 向上的三角形
// borderLeftColor: '#FF9F82', // 向右的三角形
// borderRightColor: '#FF9F82', // 向左的三角形
}

rightBottomTriangle {
width: 0,
height: 0,
borderWidth: 7, // 三角形直角边长度
borderColor: 'transparent',
borderBottomColor: '#FF9F82',
borderRightColor: '#FF9F82',
}

5.搜索联想列表项要两次点击才会触发回调，第一次只会触发收起键盘

原因：键盘弹起状态下，默认列表视图的点击会被全局捕获用于收起键盘。

解决方案：

给联想列表所在的 ScrollView or ListView 增加如下属性：

keyboardShouldPersistTaps={true}

6.android和iOS对屏幕点击事件的响应和视图点击事件的响应是相反的

原因：
在android上，首先会捕捉全局屏幕点击事件，再响应视图的点击事件
在iOS上，首先响应的是视图的点击事件，再捕捉全局屏幕点击事件

解决方案：

在需要对处理捕捉全局屏幕点击事件和响应视图的点击事件要分别处理的时候，不应该以事件调用顺序作为参考

7.键盘遮挡相关问题

描述：输入框获取焦点弹出键盘会盖住处于屏幕下方的内容

解决方案：使用第三方库react-native-keyboard-spacer，键盘弹起时会自动将一个键盘等高的view压在<KeyboardSpacer/>标签所在位置

// 引用

import KeyboardSpacer from 'react-native-keyboard-spacer';

// 插入

    <ScrollView>

        ...

    </ScrollView>

    <KeyboardSpacer/>