FlatList contentContainerStyle -> justifyContent: «центр» вызывает проблемы с прокруткой

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, чтобы решить ее

Коэффициент растягивания гибкого элемента составляет относительно размера других детей в flex-контейнере

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