如何在应用程序的主屏幕上显示平面列表组件？

Question

我开始使用 React Native，并遵循 React Native 教程中的基础知识，能够根据需要创建和修改 Flatlist。我现在正在尝试创建一个简单的待办事项应用程序，该应用程序会将不同的类调用到主屏幕。我遇到的问题是，虽然我可以调用来自不同类的简单文本，但我无法显示列表中的内容。

这是主屏幕中的代码.js：

import { View, Text, StyleSheet } from 'react-native';
import NavBar from "../components/NavBar";
import MainComponent from "../components/MainComponent"
const HomeScreen = () => {
return (
<View>
<NavBar/>
<MainComponent/>
</View>
);
};

这是MainComponent中的代码.js：

import { FlatList, StyleSheet, Text, View } from 'react-native';
class MainComponent extends Component {
render() {
return (
<View style={styles.container}>
<Text> This text is shown when running the application </Text>
<FlatList
data={[
{key: 'Placeholder data 1'},
{key: 'Placeholder data 2'},
]}
renderItem={({item}) => <Text>{item.key}</Text>}
/>
</View>
);}}

调用"MainComponent/"时，它显示"运行应用程序时显示此文本"文本，但平面列表的内容不会显示在屏幕上。如果我将上面显示的 MainComponent.js复制到一个单独的项目并单独运行它，它会正确显示平面列表的所有内容。但是我目前的解决方案不起作用。

Answer 1

找到导致列表不显示的原因。这是弹性

const styles = StyleSheet.create({ container: { flex: 1, paddingTop: 22 }, item: { padding: 10, fontSize: 18, height: 44, }, })

从代码中删除"flex：1"修复了:)

的问题