react native踩坑之路

1、scrollView在componentDidMount中使用scrollTop 真机 无效

this.scrollView.scrollTo({
      x: 400,
      y: 0,
    });

解决方法：

image.png

image.png

onLayout是rn里面组件完全渲染完触发的

2、出现结构空对象时，发布后 真机崩溃

const {} = obj;

3、rn获取屏幕宽高

import {Dimensions} from 'react-native';
const window = Dimensions.get('window');
console.log('window width', window.width);
console.log('window height', window.height);

4、RN text坑 导致安卓报错

1⃣️、

Cannot add a child that doesn't have a YogaNode to a parent without a measure function! xxxxx

image.png

空格导致安卓机报错
2⃣️、
可以在组件前加上 !! 避免报错

image.png

3⃣️、

image.png

5、小米、一加手机Text被截断的兼容问题：

在main.js：

image.png

6、key的重要性

7、原生alert在ios最多弹出两个弹窗

8、zindex 安卓无效

增加elevation属性

image.png

9、阴影
1⃣️ box-shadow react-native-shadow 缺点：需要明确指定宽高
2⃣️ rn cardview属性 react-native-cardView
3⃣️ 原生的box-showdow属性

image.png

{
    shadowColor: '#000',
    shadowOffset: { width: 4, height: 4 }, 
    shadowOpacity: 0.8, 
    shadowRadius: 6, 
    elevation: 10,  // 安卓适配
    backgroundColor: '#333'  // 安卓适配
}

10、设置borderBottomWidth和borderBottomColor在list中可能会出现不同机型有些border有显示 有的不显示 且不显示的index还不一样：
解决方法：
将border改成height: StyleSheet.hairlineWidth, backgroundColor: '#d8d8d8'的方式
然后可以尝试将一个个listItem将的height属性改成minHeight属性

11、图片等比例

width: cx(297);
resizeMode: 'contain'

获取本地图片大小

import {
  Image,
} from 'react-native';

const orderImage = Image.resolveAssetSource(require('./xxx.png'));

image.png