react-native - createStackNavigator Stack.Screen 未呈现任何组件，但已指定

Question

我的项目中有一个 Router.jsx 文件，我想在其中呈现我自己创建的自定义 React Native 组件（HomeScreen.jsx）

所以这是我的 Router.jsx 代码：

import { NavigationContainer } from 'react-navigation-native';
import { createStackNavigator } from 'react-navigation-stack';
import { enableScreens } from 'react-native-screens';
import HomeScreen from '../screens/Home/HomeScreen';

enableScreens();
const Stack = createStackNavigator();

const Router = (props) => {
    return (
        <NavigationContainer>
            <Stack.Navigator>
                <Stack.Screen name={'Destination Search'} component={HomeScreen} />
            </Stack.Navigator>
        </NavigationContainer>
    );
};

export default Router;

HomeScreen 是我的自定义组件。这是我的 HomeScreen.jsx：

import React from 'react';
import { View, Text, ImageBackground, Button, Pressable, Image } from 'react-native';
import styles from './styles';
import Entypo from 'react-native-vector-icons/Entypo';
import Fontisto from 'react-native-vector-icons/Fontisto';

const HomeScreen = (props) => {
    return (
        <View>
            {/* SEARCH BAR */}
            <Pressable style={styles.searchButton} onPress={() => console.warn('Search Button Pressed')}>
                <Fontisto name="search" size={25} color="#f15454" />
                <Text style={styles.searchText}>Where Are You Going? </Text>
            </Pressable>

            <ImageBackground
                source={require('../../../assets/images/wallpaper.jpg')}
                style={styles.image}
            />
            {/*   TITLE   */}
            <Text style={styles.title}>Go Near</Text>
            {/* BUTTON */}
            <Pressable style={styles.button} onPress={() => console.warn('Explore Button Pressed')}>
                <Text style={styles.buttonText}>Explore Nearby Stays</Text>
            </Pressable>
        </View>
    );
};

export default HomeScreen;

我已将路由器导出到 App.jsx（主文件）。这是 App.jsx

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, ScrollView, FlatList } from 'react-native';
import Entype from 'react-native-vector-icons/Entypo';
import HomeScreen from './src/screens/Home/HomeScreen';
import Post from './src/components/posts/Post';
import feed from './assets/feed';
import SearchResultsScreen from './src/screens/SearchResults/SearchResultsScreen';
import LocationSearchScreen from './src/screens/LocationSearch/LocationSearch';
import GuestScreen from './src//screens/Guests/GuestsScreen';
import 'react-native-gesture-handler';
import Router from './src/navigation/Router';

export default function App() {
    return (
        <View>
            <StatusBar style="auto" />
            <SafeAreaView>
                {/*  START APP */}
                <Router />
                {/* END APP */}
            </SafeAreaView>
        </View>
    );
}

所以当我保存并重新加载 Expo 时，我只看到堆栈的标题（Destination Search），但我没有看到任何内容（HomeScreen.jsx）

有关更多上下文，这是我的项目结构：

我能做些什么来解决这个问题？

标签： react-nativereact-navigation-v5react-navigation-stack