如何在 Flatlist 中渲染全屏单项反应原生？

Question

I use Flatlist and I want to implement UI full screen for every item. I already use contentContainerStyle={{flexGrow:1}} And all parent be flex 1. But every item view is not full screen. Thanks for your help, I appreciate it

My code:

      <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

You can give a style each component screen width and height. For example;

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