React-Native 常见坑

Android 适配

1. Android 部分控件display 属性无效

eg：Button 控件需要外层使用<View style={{display:'flex'}}>

2. Android 安卓底部返回按钮事件捕捉

自定义导航栏时添加返回事件，Android 底部返回需要增加监听

  componentDidMount() {
        if(Platform.OS === "android") {
            BackHandler.addEventListener('hardwareBackPress', ()=>{
              return this.handleBackAndroid(this.state.newSelect,this.state.selects,this.state.selectModels);
            });
          }
    }
    componentWillUnmount() {
        //如果当前是Android系统，则移除back键按下事件监听
        if(Platform.OS === "android") {
            BackHandler.removeEventListener('hardwareBackPress', ()=>{});
        }
      }

3. Mac 执行 run android 报错 spawn ./gradlew EACCES

这个报错是因为 运行项目执行的 ./gradlew 脚本没有权限的问题，解决办法就是给./gradlew配置执行权限

chmod +x android/gradlew

iOS适配

1. ScrollView 滚动条位置偏离

解决办法：
1 增加属性设置 scrollIndicatorInsets={{ right: 1 }}

三方库

1."react-native-modal-dropdown"

安装报错
需要 package.json 如下引用

"react-native-modal-dropdown": "git+https://github.com/siemiatj/react-native-modal-dropdown.git",

2."react-native-fetch-blob"

Android 打包报错，原因库版本太老
需要修改Andorid 文件夹下build.gradle内容，改成如下版本号

android {
    compileSdkVersion 29
    buildToolsVersion "29.0.2"
    defaultConfig {
        minSdkVersion 16
        targetSdkVersion 29
        versionCode 1
        versionName "1.0"
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    productFlavors {
    }
}