How do I properly define screens for React Native Navigation? (Error: Couldn't find any screens for the navigator. Have you defined any screens...)

Question

首先我看了

那个人有一系列尚未填充的屏幕。我已经定义了我的屏幕并直接使用它们。

我是 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

屏幕组件只需要 return 一个元素。

如果您需要 return 多个元素，您可以将其包装在 <> 应答器或任何其他组件中。

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

How do I properly define screens for React Native Navigation? (Error: Couldn't find any screens for the navigator. Have you defined any screens...)

How do I properly define screens for React Native Navigation? (Error: Couldn't find any screens for the navigator. Have you defined any screens...)

javascript

reactjs

react-native

react-navigation