如何在 ReactNative 中使用导航时处理错误?

问题:如何在 ReactNative 中使用导航时处理错误"导航器只能包含 'Screen' 组件作为其直接子组件"?

解决方案

在使用您的应用时，您可能会遇到上述问题。这里将了解为什么会出现这样的错误以及如何避免它。

以下是给出错误的代码 −

示例

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';
const Stack = createStackNavigator();
const HomePage = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate('About',
      { name: 'About Page' })}/>
   );
};
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
   return (
      <NavigationContainer>
         <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{ title: 'From home page : Navigation' }}
               />
            <Stack.Screen name="About" component={AboutPage} />
         </Stack.Navigator>
      </NavigationContainer>
   );
};
export default MyStack;

编译 − 时，命令提示符中显示的错误如下

手机屏幕上的错误显示如下 −

错误原因 − 导航器只能包含 'Screen' 组件作为其直接子组件

错误的第一个原因是缩进错误。每个组件都正确缩进是非常必要的。子元素在父组件内正确缩进。

第二种情况是由于每个组件末尾留有空格。从屏幕末尾删除空格并重新编译。它会正常工作。从其他来源复制粘贴代码时请小心。您主要会在这些情况下遇到此错误。

现在让我们缩进上面的代码，并删除空格(如果有)。这是带有输出的最终代码。

示例

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';
const Stack = createStackNavigator();
const HomePage = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate('About',
         { name: 'About Page' })}/>
   );
};
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
   return (
      <NavigationContainer>
         <Stack.Navigator>
            <Stack.Screen name="Home" component={HomePage} options={{ title:
               'From home page : Navigation' }} />
            <Stack.Screen name="About" component={AboutPage} />
         </Stack.Navigator>
      </NavigationContainer>
   );
};
export default MyStack;

相关文章

• 如何在 React Native 中显示 Material Chip View?
• 解释 React Native 中动画的工作原理?
• 如何在 reactnative 中显示复选框?
• 如何在 ReactNative 中显示日期和时间选择器?
• 解释 ReactNative SwitchSelector 组件
• 如何处理 ReactNative 中的错误"文本字符串必须在 <Text> 组件内呈现"?
• 如何在 React Native 中处理从一个页面到另一个页面的导航?
• 解释 ReactNative 中的 VirtualizedList 组件用法?
• 如何在 ReactNative 中显示下拉列表?
• 解释一下 React Native 中 SafeViewArea 的重要性?

有用资源

• javascript 参考教程 - 该教程包含有关 javascript 的更多信息:https://www.cainiaomax.com/javascript/