时间戳

首页 > 解决方案 > 如何在应用程序的主屏幕上显示 Flatlist 组件？

react-native - 如何在应用程序的主屏幕上显示 Flatlist 组件？

问题描述

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

标签： react-native

解决方案

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

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

从代码中取出“flex: 1”解决了这个问题:)

推荐阅读