如何在本机反应中使我的平面清单项目全高？

Question

我在FlatList中有5个项目。

我希望我的项目在全屏模式下（顶部图像到底部图像）均匀地呈现。

如果更改高度或flex，它将在当前backgroundImage空间中显示5个项目。

我应该改变什么？。

        <View
          style={{
            flex: 1,
            flexDirection: 'column',
            backgroundColor: 'black',
          }}
        >
          <FlatList
            style={{ flex: 1 }}
            data={emotions}
            renderItem={({ item }) => (
              <ImageBackground
                source={item.img}
                style={{
                  width: '100%',
                  height: '100%',
                  justifyContent: 'center',
                  margin: 2,
                  alignContent: 'stretch',
                }}
              >
                <Text
                  style={{
                    fontSize: 20,
                    textAlign: 'center',
                    color: 'white',
                  }}
                  onPress={() => this.handlePress(`${item.title}`)}
                >
                  {item.title}
                </Text>
              </ImageBackground>
            )}
            keyExtractor={item => item.title}
            numColumns={1}
          ></FlatList>
        </View>

Answer 1

您可以在渲染项目中尝试

请替换为该

height: '100%'

使用

flex:1