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. 设置启动屏
    请参考此文章 点击查看

你可能感兴趣的:(react-native,跨平台应用)