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

【问题标题】：How to render fullscreen single item in Flatlist react native?如何在 Flatlist 中渲染全屏单项反应原生？
【发布时间】：2020-07-20 05:56:44
【问题描述】：

我使用 Flatlist，我想为每个项目实现 UI 全屏。我已经使用contentContainerStyle={{flexGrow:1}} 所有父母都是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>

【问题讨论】：

请添加您的完整代码
我更新了蒂姆。请检查

标签： react-native scrollview react-native-flatlist

【解决方案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
    }
})

【讨论】：

你添加背景颜色了吗？
我们如何在平面列表中获取用户滚动到的项目？谢谢伊尔克