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

它不是一个错误而且你做得不好，这是预期的行为，因为你将<{1}}添加到容器flex列表，使其占据屏幕的整体ScrollView's，因此仅可滚动到屏幕的内容。

您需要使用height代替flexGrow来解决问题

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

flex

FlatList contentContainerStyle - ＆gt; justifyContent：'center'导致滚动问题

1 个答案: