FlatList contentContainerStyle - > justifyContent:'center'导致滚动问题

Question

我有一个FlatList组件,我渲染x数TouchableHighlight.我需要FlatList垂直对齐的所有组件到中心.

问题是,如果我把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>
          )
        }}
      />

我不知道这是不是一个错误,或者我只是做得不好.

Answer 1

它不是一个错误而且你没有做坏事,这是预期的行为,因为你将显式添加flex到列表的容器中,ScrollView's使其占据height屏幕的整体,因此只可滚动到屏幕的内容.

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

柔性物品的柔性成长的因素是相对大小的的其他孩子在柔性容器

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