FlatList的contentContainerStyle属性中，使用justifyContent: 'center'会导致滚动出现问题。

Question

我有一个FlatList组件，我在其中呈现x个TouchableHighlight。我需要FlatList中的所有组件垂直居中。

问题在于，如果我在contentContainerStyle中放置justifyContent: center，则什么也不会发生，但是，如果我向contentContainerStyle添加flex: 1，就会得到想要的结果。如果我不需要滚动，那很酷，但是当我在FlatList中有一些组件强制滚动以查看全部内容时，滚动从列表中心开始，并且不允许我滚动。

这是我的代码:

<FlatList
        style = {{flex: 0.7, backgroundColor: 'red'}}
        data = {this.props.actions}
        contentContainerStyle = {{justifyContent:'center',}}
        keyExtractor={(item, index) => index}
        renderItem = {({item, index})=>{
          return (
            <TouchableHighlight
              style = {{alignItems: 'center', margin: 8, paddingTop: 8, paddingBottom: 8, //flex: 1,
              borderColor: ConstantesString.colorGrisFlojito, backgroundColor: '#d7deeb',
              borderRadius: 10,
            }}
              underlayColor = {ConstantesString.colorAzulTouched}
              onPress = {()=>{
                item.action();
              }}>
              <Text
                style = {{color: '#005288' , textAlign: 'center', fontSize: 20}}
              >
                {item.name}
              </Text>
            </TouchableHighlight>
          )
        }}
      />

我不知道这是一个错误还是我做得不好。

- SmoggeR_js

Answer 1

这不是一个bug，而且你做得并不差。这是预期的行为，因为您正在向ScrollView列表的容器中添加显式的flex，使其占据整个屏幕的height，因此只能滚动到屏幕内容的范围内。

您需要使用flexGrow来解决问题

弹性项的弹性增长因子是相对于弹性容器中其他子项的大小而言的。

<FlatList
    contentContainerStyle={{flexGrow: 1, justifyContent: 'center'}}
    //... other props
/>

- Pritish Vaidya