Блог

Мой flatlist завершается, но я этого не хочу. Является ли это специфичным для типа данных?

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

 <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
},
  

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

  container: {
    flex: 1
 }, 
  item: {
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
   }