Почему flatlist не помещается в контейнер - React Native

Мой плоский список завершается, но я этого не хочу. Это зависит от типа данных?

Вот соответствующий код, если я использую плоский список:

<View>
                                <Text style={styles.statLabel}>
                                    Habilidad(es)
                                </Text>
                                <FlatList
                                    data={ this.state.pokemonAbilities }
                                    renderItem={({item}) => <Text style={styles.statData}>{item.node}</Text>
                                    }
                                    keyExtractor={(item) => item.id}
                                />
                            </View>

Когда я визуализирую этот код, Habilidades не находится под двумя другими характеристиками, как должно быть. Вместо этого он переносится и заканчивается справа: Визуализировать с помощью FlatList

Когда я удаляю плоский список и вместо этого использую текст-заполнитель, он работает:

<View>
                                <Text style={styles.statLabel}>
                                    Habilidad(es)
                                </Text>
                                <Text>
                                    Placeholder
                                </Text>
                            </View>

Приведенный выше код отображает следующее: Код с заполнителем

Стили для AbilityContainer, statsLabel и statsData находятся здесь:

statLabel: {
    color: 'white',
    fontSize: 20,
},
stateData: {
    marginBottom: 20
},

react-native react-native-ios react-native-flatlist react-native-stylesheet
person stuckNconfuzed    schedule 10.11.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы должны добавить представление FlatList, после чего вы должны добавить контейнер стиля следующим образом:

 container: {
    flex: 1
 }, 
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
   }
person Elif    schedule 10.11.2020
comment
не работает с моей стороны - person Riku; 10.06.2021