react-native - 如何在本机反应中使我的 Flatlist 项目全高？

Question

我在 FlatList 中有 5 个项目。

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

如果我改变高度或弹性，它将在当前背景图像空间中显示 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>

标签： react-native

Answer 1

在渲染项目中你可以试试这个

请更换这个

height: '100%'

和

flex:1