为什么我显示空白屏幕？

Question

import React from 'react';
import type {PropsWithChildren} from 'react';
import {
  Dimensions,
  FlatList,
  Image,
  Pressable,
  SafeAreaView,
  ScrollView,
  StatusBar,
  StyleSheet,
  Text,
  useColorScheme,
  View,
} from 'react-native';
import Home from './screens/Home';
import Items from './data.json';

const totalHeight = Dimensions.get('window').height;

function App(): JSX.Element {
  return (
    <SafeAreaView>
      <StatusBar />
      <View style={styles.container1}>
        <Home />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container1: {
    flex: 1,
  },
  
});

export default App;

Home.tsx

import {
  Dimensions,
  FlatList,
  Image,
  Pressable,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import React from 'react';
import Items from '../data.json';

const totalHeight = Dimensions.get('window').height;
const Home = () => {
  return (
    <View style={styles.container}>
      <FlatList
        contentContainerStyle={styles.itemsContainer}
        data={Items.items}
        numColumns={2}
        keyExtractor={(item, idx) => item + String(idx)}
        renderItem={({item}) => (
          <Pressable style={styles.itemContainer}>
            <Image style={styles.image} source={{uri: item.img}} />
            <Text style={styles.text}>{item.name}</Text>
          </Pressable>
        )}
      />
    </View>
  );
};

export default Home;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'gray',
    height: totalHeight,
  },
  itemsContainer: {
    flex: 1,
    gap: 4,
    justifyContent: 'space-between',
    alignItems: 'center',
  },
  itemContainer: {
    display: 'flex',
    justifyContent: 'space-around',
    alignItems: 'center',
    backgroundColor: '#fff',
    width: 100,
    height: 100,
    borderRadius: 15,
    margin: 30,
  },
  image: {
    height: 50,
    width: 50,
  },
  text: {
    color: 'black',
    fontSize: 20,
  },
});

如果我在没有滚动视图的情况下调用主页组件，它会渲染数据，但会出现虚拟化错误，但如果我删除滚动视图，它只会显示空白屏幕

我从主要组件中删除了视图，以查看它与平面列表是否有任何冲突，但它仍然不起作用

请找到 mw 解决方案我是 React Native 的新手

Answer 1

我确实尝试过您提供的代码，

itemsContainer: { flex: 1, gap: 4, ...}

在这里只需删除

flex: 1

，

itemsContainer: {
    gap: 4,
    alignItems: 'center',
    justifyContent: 'space-between',
    backgroundColor: 'maroon',
  },

（快速修复...无法解释 React Native 的这种行为）