为什么 flatlist 无法放入容器中 - React Native

Question

我的平面列表正在换行，但我不想这样。这是特定于数据类型的吗？

如果我使用 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”不在其他两个统计数据之下，因为它应该是。相反，它包裹并在右侧结束： Render with FlatList

当我删除平面列表并使用占位符文本时，它可以工作：

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

以上代码呈现以下内容： Code with placeholder

abilityContainer、statsLabel 和 statsData 的样式在这里：

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

Answer 1

你应该添加一个 FlatList 的视图，然后你应该像这样添加样式容器：

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