ReactNative适配问题汇总
1. ⼩⽶⼿机上存在⽂字截断的问题
描述：
居中对齐的Text在⽔平⽅向上会缺失最后⼀个字
reactnative开发
设置了⾏⾼的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/>