Question

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

这是Homescreen.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 /”时，它显示“运行应用程序时将显示此文本” -text，但是Flatlist的内容未显示在屏幕上。如果我将上面显示的MainComponent.js复制到一个单独的项目并单独运行，它将正确显示Flatlist的所有内容。但是我当前的解决方案不起作用。

Answer 1

找到了导致列表不显示的原因。这是flex

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

从代码中删除“ flex：1”可解决问题：）

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

1 个答案: