Expo React Native中FlatList无法滚动问题求助

问题分析 #

你的FlatList无法滚动的核心原因是父容器没有明确的高度约束，导致FlatList无法识别可滚动区域；同时SafeAreaView未设置flex布局，无法为FlatList提供足够的空间。

具体修改步骤 #

1. 调整Home组件中section2_sub1的样式 #

打开Home组件的样式定义，修改section2_sub1，移除冲突的height: '100%'属性：

section2_sub1: {
    flex: 8,
    width: '100%',
    backgroundColor: '#A9F889'
},

原height: '100%'会和flex布局规则冲突，导致容器高度计算异常，移除后让flex属性自动分配高度。

2. 修改ImageAPI中的SafeAreaView和FlatList样式 #

打开ImageAPI.js文件，给SafeAreaView添加flex:1样式，同时给FlatList的style补充flex:1：

// 修改SafeAreaView部分
<SafeAreaView style={{flex: 1}}>
    <FlatList
        data={[...new Array(10)].map((_, i) => i.toString())}
        style={styles.list}
        numColumns={2}
        keyExtractor={(e) => e}
        renderItem={({ item }) => (
            <Image
                transition={true}
                source={{ uri: BASE_URI + item }}
                containerStyle={styles.item}
                PlaceholderContent={<ActivityIndicator />}
            />
        )}
    />
</SafeAreaView>

// 修改styles中的list样式
list: {
    flex: 1,
    width: '100%',
    backgroundColor: '#000',
},

• SafeAreaView设置flex:1可让它占满父容器的可用空间
• FlatList添加flex:1确保它填充SafeAreaView的空间，从而正确计算滚动区域

3. 可选：清理冗余的height属性 #

检查Home组件中txtInputView的样式，height: '50%'和flex:3存在布局冲突，建议移除height属性：

txtInputView: {
    flex: 3,
    width: '85%',
    alignItems: 'center',
    justifyContent: 'center',
    marginTop: 20,
    marginBottom: 20
},

完成以上修改后，FlatList即可正常滚动展示图片网格。

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