React-Native FlatList is not scrolling

Question

我对原生react还很陌生。我已经创建了一个平面列表来呈现这个项目列表，但是，它不是滚动的。我在谷歌上搜索了几个小时，并尝试了栈溢出线程中建议的几乎所有内容——删除flex、添加flex、将其封装在视图中，但似乎都不起作用。

这是我的代码(问题在第二个平面列表中(-

return(
<View style = {{ height: '100%' }}>

<View style = {{ width: '100%' }}>
<AppHeader />
</View>

<View style = {{ width: '100%'}}>

<View style = {{ width: '70%', alignSelf: 'center', flex: 1 }}>

<View>
<FlatList
data = {this.getTodayDay()}
renderItem = {this.renderItemDays}
keyExtractor = {this.keyExtractor}
/>
</View>

<FlatList
data = {this.getVisibleHours()}
renderItem = {this.renderItem}
keyExtractor = {this.keyExtractor}
scrollEnabled = {true}
/>

</View>

</View>

</View>

this.renderItem-

renderItem = () => {
// irrelevant code


if( isClass === true ){
return(
<ListItem bottomDivider = {true} style = {styles.renderItemActiveClass}>
<ListItem.Content>
<TouchableOpacity
onPress = {()=>{
this.props.navigation.navigate('ClassDetailsScreen', { "data": classData })
}}>
<ListItem.Title>{ definiteClassTime }</ListItem.Title>
<ListItem.Subtitle>{ classData.class_name }</ListItem.Subtitle>
</TouchableOpacity>
</ListItem.Content>
</ListItem>
)
}
else{
return(
<ListItem bottomDivider = {true} style = {styles.renderItemClass} 
containerStyle = {styles.renderItemContent}>
<ListItem.Content>
<ListItem.Title>{item}:00</ListItem.Title>
<ListItem.Subtitle>No Class</ListItem.Subtitle>
</ListItem.Content>
</ListItem>
)
}
}

样式表-

renderItemClass: {
borderColor: 'purple',
borderWidth: 2
}, 
renderItemActiveClass: {
borderColor: 'green',
borderWidth: 2
},
renderItemContent: {
},

有人能告诉我我做错了什么吗？

Answer 1

为两个平面列表添加一个高度。同时将你的第二个平面主义者包裹在一个单独的视图中。这里有一个例子：

return (
<View style={{ height: "100%" }}>
<View style={{ width: "100%" }}>
<AppHeader />
</View>
<View style={{ width: "100%" }}>
<View style={{ width: "70%", alignSelf: "center", flex: 1 }}>
<View style={{ height: 60, alignSelf: "center" }}>
<FlatList
data={this.getTodayDay()}
renderItem={this.renderItemDays}
keyExtractor={this.keyExtractor}
/>
</View>
<View style={{ height: 60, alignSelf: "center" }}>
<FlatList
data={this.getVisibleHours()}
renderItem={this.renderItem}
keyExtractor={this.keyExtractor}
scrollEnabled={true}
/>
</View>
</View>
</View>
</View>
);