React Navigator 5 Stack "component" 没有 return 任何东西

Question

我正在使用 React Native 为我的网站创建我的应用程序，由于我不知道如何解决 header 滚动问题，我找到了替代方法，即 React Navigator 5。但是，在 <Stack.Screen name="Home" component={Home} /> 中，除了 iPhone 之外，它没有显示任何内容，只有上面的“Home”文本是 Stack.Screen 中的名称参数，它应该显示我从我调用的 API 中获得的列表，因为我已经测试了在 React Navigation 之前显示的 FlatList：这是代码：

import React, { Component, useState, useEffect } from 'react';
import { Text, View, ScrollView, Image, Platform, TouchableHighlight, SafeAreaView, FlatList, StyleSheet } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function Main() {
    return (
        <SafeAreaView>
            <NavigationContainer>
                <Stack.Navigator>
                    <Stack.Screen
                        name="Home"
                        component={Home} //Class component, Turning it to Function Component no luck for me to fix.
                    />
                </Stack.Navigator>
            </NavigationContainer>
        </SafeAreaView>
    );
}

class Home extends Component {
    constructor(props) {
        super(props)
        this.state = {
            postlists: [],
            postlistsnum: 0,
        }
    }

    componentDidMount() {
        this.SendAPI();
    }

    SendAPI() {
        //any api get command here
    }

    postRow({ item }) {
        return (
            <View
                style={PostListStyles.post}>
                <Text>{item.title}</Text>
            </View>
        )
    }

    render() {
        return (
            <FlatList
                data={this.state.postlists}
                renderItem={this.postRow}
                scrollEnabled={false}
                style={{
                    marginTop: 50,
                }}
            />
        )
    }
}

export default Main;

Answer 1

你能试试 export default 而不是 function Main() { only...

像这样：export default functionMain() {

此外，我认为您不应该将 SafeAreaView 放在 NavigationContainer 之外。尝试将 SafeAreaView 放在 Home 中 Class

Answer 2

固定：
index.js:

import {AppRegistry} from 'react-native';
import App from './App';
import Main from './Main'
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Main); //switching from App to Main

也谢谢大家的解答！

React Navigator 5 Stack "component" 没有 return 任何东西

React Navigator 5 Stack "component" doesn't return anything

react-native

react-native-android

react-native-ios

react-navigation