react-native 日常问题记录(不定时更新)

本文主要记录使用 react-native 的过程中的一些问题和需要注意的地方，持续更新。

1. FlatList滚动事件
   ScrollView与FlatList是父子关系，在ScrollView中滚动事件用 onScroll 监听，所以在 FlatList 中可以用onScroll监听

   <FlatList
   	ref={(flatList)=>this._flatList = flatList}
       onEndReachedThreshold={0.1}
       onEndReached={this.loadmore}
       ListHeaderComponent={this.props.children}
       // 滚动监听
       onScroll={this.onScroll}
       data={this.props.articles}>
   </FlatList>
   // 滚动监听
   onScroll = (event) => {
   	// 获取距离顶部的距离,用以做其他操作的判断依据
       let offsetTop = event.nativeEvent.contentOffset.y;
   }
   

2. 报错Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED
   报错信息如下:

   > Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED
   D8: Cannot fit requested classes in a single dex file (# methods: 70644 > 65536
   
   FAILURE: Build failed with an exception.
   
   * What went wrong:
   Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'.
   > com.android.builder.dexing.DexArchiveMergerException: Error while merging dex archives: 
   The number of method references in a .dex file cannot exceed 64K.
   Learn how to resolve this issue at https://developer.android.com/tools/building/multidex.html
   

   解决方案：在android/app/build.gradle文件中的 defaultConfig 对象中添加multiDexEnabled：true，取消dex文件的限制。
3. react-navigation 导航去掉下面边框和阴影
   react-navigation组件默认有下边框，android还有阴影效果，想要去掉可以采取以下设置：

   <Stack.Navigator
      mode='modal'
      headerMode='float'
      screenOptions={{                 //用来定制头部信息、根据自己需要更改
         headerStyle: {
            backgroundColor: this.props.theme.themeColor,
            // 去掉下边框和阴影
            borderBottomWidth: 0,
            elevation: 0,
         },
         headerTintColor: '#fff',
         headerTitleStyle: {
            fontSize: 18,
         }
   }}>
   

4. 安卓下stack-navigation（5.X）页面左右切换

   <Stack.Navigator
      mode='modal'
      headerMode='float'
      screenOptions={{                 //用来定制头部信息、根据自己需要更改
         // 添加这一行会实现安卓下页面的左右切换，默认是从下到上
         cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS
   }}>
   

5. TextInput会遇到的问题和解决方法
   • TextInput在安卓上默认有一个底边框，同时会有一些padding
     设置padding: 0，同时设置underlineColorAndroid="transparent"来去掉底边框
   • 在安卓上如果设置multiline = {true}，文本默认会垂直居中
     设置textAlignVertical: 'top’样式来使其居顶显示
   • 当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效
     为了能够实现效果你可以使用一个View来包裹TextInput
6. 安装某些插件link之后报错
   react-native 版本大于6.0的不需要手动 link，如果已经手动操作了，执行unlink或者降低react-native版本即可。
7. 集成redux，react-navigation
   请参考以下文章
   链接一
   链接二
8. code-push 热更新
   请参考此文章点击查看
9. 设置启动屏
   请参考此文章 点击查看