我想让我的平面列表仅垂直滚动而不是水平滚动。我的代码当前如下所示:
renderActivityPost = (activity) => {
<View style={styles.activityPost}>
<View style={styles.postTitleContainer}>
<Text style={styles.postTitle}>{post.username}</Text>
</View>
<View style={styles.commentContainer}>
<Text style={styles.commentContent}>
{post.comment}
</Text>
</View>
</View>
}
render () {
return
(
<View style={styles.feedPostsContainer}>
<FlatList
keyExtractor={this.keyExtractor}
data={this.state.activities}
renderItem={this.renderActivityPost}
showsHorizontalScrollIndicator={false}/>
</View>
);
我的风格如下:
activityPost: {
flex: 1,
},
postTitleContainer: {
flexDirection: 'row',
width: '80%',
justifyContent: 'space-between'
},
commentContainer: {
marginLeft: 20,
paddingTop: 10,
width: '80%',
flex: 1,
flexDirection: 'row'
},
commentContent: {
fontSize: 16,
fontFamily: 'assistant-light',
color: colors.white,
flex: 1,
flexWrap: 'wrap'
},
注释是唯一超出屏幕宽度的内容,因此我将其包含在带有flexWrap的容器中,以便单词可以环绕。文字和所有内容现在都可以正常显示并可以垂直滚动,但是它也可以水平滚动到我不知道如何禁用的空白处。是否为FlatList提供了一些支持,或者是否有其他组件安排让我禁用水平滚动?