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

【问题标题】：FlatList contentContainerStyle -> justifyContent: 'center' causes issues with scrollingFlatList contentContainerStyle -> justifyContent: 'center' 导致滚动问题
【发布时间】：2018-10-20 11:01:34
【问题描述】：

我有一个 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>
          )
        }}
      />

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

【问题讨论】：

标签： javascript android ios react-native mobile-development

【解决方案1】：

这不是一个错误，你没有做坏事，这是预期的行为，因为你将明确的 flex 添加到 @987654322 的容器 @list 使其占据整个屏幕的height，因此只能滚动到屏幕的内容。

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

弹性项目的弹性增长因子相对于弹性容器中其他子项的大小

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

【讨论】：