如何在 Flatlist React Native 中呈现全屏单个项目？

Question

我使用 Flatlist，我想为每个项目实现 UI 全屏显示。我已经在使用 contentContainerStyle={{flexGrow:1}} 所有 parent 都是 flex 1。但是每个项目视图都不是全屏的。感谢您的帮助，我很感激

我的代码：

      <View style={{ flex: 1 }}>
         <FlatList
          data={["1", "2", "3"]}
          keyExtractor={(item, index) => index.toString()}
          contentContainerStyle={{ flexGrow: 1 }}
          pagingEnabled={true}
          renderItem={(item) => {
            return (
              <View style={{ height: Dimensions.height, width: Dimensions.width }}>
                <Text>{item.item}</Text>
              </View>
            )
          }}
       />
      </View>

Answer 1

您可以为每个组件的屏幕宽度和高度指定一个样式。例如;

import { FlatList, StyleSheet, Dimensions } from 'react-native';

const {width, heigth} = Dimensions.get('window');

<FlatList 
    ...
    renderItem={{item} => (<View style={styles.itemWrapper} > {/* Your components */} </View>)}
/>

const styles = StyleSheet.create({
    itemWrapper: {
        width,
        heigth
    }
})

如何在 Flatlist React Native 中呈现全屏单个项目？

How to render fullscreen single item in Flatlist react native?

scrollview

react-native

react-native-flatlist