Javascript 扁平列表内容容器样式->；为内容辩护：'；中心'；导致滚动出现问题

我有一个

FlatList

组件，其中我渲染了x个

TouchableHighlight

。我需要将

平面列表中的所有组件与中心垂直对齐

问题是，如果我将
justifyContent:center
放在
contentContainerStyle
中，什么都不会发生，但是如果我将
flex:1
添加到
contentContainerStyle
中，我会得到想要的结果。如果我不必进行滚动，这很酷，但是当我在
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>
          )
        }}
      />

index}
renderItem={（{item，index}）=>{
返回(
{
项目.行动（）；
}}>
{item.name}
)
}}
/>

我不知道这是一个bug还是我在做坏事。
这不是bug，你也没有做坏事，这是预期的行为，因为你将显式
flex
添加到
ScrollView
列表的容器中，使其占据整个
屏幕的高度，因此，只能滚动到屏幕的内容

您需要使用
flexGrow
而不是
flex
来解决它

flex项的flex增长因子与flex容器中其他子项的大小相关



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