使平面列表仅垂直滚动

时间:2018-11-29 06:56:03

标签: react-native

我想让我的平面列表仅垂直滚动而不是水平滚动。我的代码当前如下所示:

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提供了一些支持,或者是否有其他组件安排让我禁用水平滚动?

0 个答案:

没有答案