如何正确定义 React 本机导航的屏幕？(错误：找不到导航器的任何屏幕。你有没有定义任何屏幕...

Question

首先我查看了错误：Cand'；找不到导航器的任何屏幕。你有没有把任何屏幕定义为它的子屏幕？

那个人有一排还没有填满的屏幕。我已经定义了我的屏幕并直接使用它们。

我是React Native的新手，我正在尝试将导航添加到基本模板中。进展不顺利。

我的代码如下：

/**
* Sample React Native App
* https://github.com/facebook/react-native
*
* @format
* @flow strict-local
*/
import React from 'react';
import type {Node} from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {
SafeAreaView,
ScrollView,
StatusBar,
StyleSheet,
Text,
useColorScheme,
View,
Button,
} from 'react-native';
const Stack = createStackNavigator();
const HomeScreen = ({ navigation }) => {
return (
<Button
title="Go to Jane's profile"
onPress={() =>
navigation.navigate('Profile', { name: 'Jane' })
}
/>
);
};
const ProfileScreen = ({ navigation, route }) => {
return <Text>This is {route.params.name}'s profile</Text>;
<Button
title="Go to Home"
onPress={() =>
navigation.navigate('Home')
}
/>
};
const App: () => Node = () => {
const isDarkMode = useColorScheme() === 'dark';
const backgroundStyle = {
backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
};

return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Welcome' }}
key="1"
/>
<Stack.Screen name="Profile" component={ProfileScreen} key='2' />
</Stack.Navigator>
</NavigationContainer>
);
};
export default App;

在这一点上，我得到了错误：

Error: Couldn't find any screens for the navigator. Have you defined any screens as its children?

我想我缺少一些基本的东西。

Answer 1

作为屏幕的组件只需要返回一个元素。

如果需要返回多个元素，可以将其包装在<gt<>应答器或任何其他部件。

const ProfileScreen = ({ navigation, route }) => {
return (
<>
<Text>This is {route.params.name}'s profile</Text>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
</>
);
};