React Native：Android端ScrollView无法滚动但iOS端正常

问题描述 #

自定义的ScrollView组件在iOS端可正常滚动，但Android端卡顿无法滚动，组件代码及主页面使用代码如下：

ScrollView组件代码 #

<ScrollView style={{maxHeight:100,width: widthPercentageToDP('70%')}}>
      <View style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'flex-start', justifyContent: 'flex-start',  marginBottom: 10 }}>

        {items?.map((item) => {
          return <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#e2cbff', paddingVertical: 6, paddingHorizontal: 10, marginTop: 10, marginRight: 10, borderRadius: 20, borderWidth:0.5, borderColor:'#461584'}}>
            <Text style={{ fontSize: 11, color: '#461584' }} >{item[itemKey]}</Text>
          </View>
        })}
      </View>
</ScrollView>

主页面使用代码 #

<View>
            <Text style={styles.personalInfoTitle}>Skills/Experties</Text>
            <ChipList items={profile?.expertises} itemKey='name'/>
</View>

解决方案 #

1. 启用安卓嵌套滚动 #

Android默认关闭嵌套滚动，给ScrollView添加nestedScrollEnabled属性，允许其在父容器为滚动视图时正常交互：

<ScrollView 
  style={{maxHeight:100,width: widthPercentageToDP('70%')}}
  nestedScrollEnabled={true}
>
  {/* 原有内部视图 */}
</ScrollView>

2. 给列表项添加唯一Key #

React列表渲染时需要唯一key来优化重渲染逻辑，避免不必要的组件更新，添加key后能提升安卓端滚动流畅度：

{items?.map((item, index) => {
  // 优先使用item的唯一ID（如item.id），无唯一ID时用index
  return <View 
    key={item.id || index}
    style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#e2cbff', paddingVertical: 6, paddingHorizontal: 10, marginTop: 10, marginRight: 10, borderRadius: 20, borderWidth:0.5, borderColor:'#461584'}}
  >
    <Text style={{ fontSize: 11, color: '#461584' }} >{item[itemKey]}</Text>
  </View>
})}

3. 用FlatList替代ScrollView优化性能 #

当列表项较多时，FlatList的虚拟化渲染比ScrollView更高效，能显著提升安卓端滚动性能，同时实现自动换行效果：

<FlatList
  style={{maxHeight:100,width: widthPercentageToDP('70%')}}
  data={items}
  numColumns={Infinity} // 实现横向自动换行
  renderItem={({item}) => (
    <View style={{ flexDirection: 'row', justifyContent: 'center', alignItems: 'center', backgroundColor: '#e2cbff', paddingVertical: 6, paddingHorizontal: 10, marginTop: 10, marginRight: 10, borderRadius: 20, borderWidth:0.5, borderColor:'#461584'}}>
      <Text style={{ fontSize: 11, color: '#461584' }} >{item[itemKey]}</Text>
    </View>
  )}
  keyExtractor={(item) => item.id || item[itemKey]} // 用唯一标识作为key
  nestedScrollEnabled={true}
/>

内容的提问来源于stack exchange，提问作者Mashood Ali