使用 stackNavigation 在 react-native 错误中导航

Question

在我正在创建的应用程序中，我设置了底部选项卡。它们运行正常。

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Feed"
                     tabBarOptions={{activeTintColor: '#F78400'}}>
        <Tab.Screen
          name="Authentication" component={Authentication}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("./assets/images/authentication.jpg")}
                    style={{ width: 20, height: 20 }}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name="Dashboard"
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("./assets/images/dashboard.png")}
                  style={{ width: 20, height: 20 }}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name="Tools"
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("./assets/images/tools.png")}
                  style={{ width: 20, height: 20 }}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name="Settings"
          component={Settings}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("./assets/images/settings.png")}
                  style={{ width: 20, height: 20 }}
                />
              );
            }
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

所以现在，我想设置导航，以便能够从一个屏幕转到另一个屏幕。我将堆栈的代码添加到选项卡的代码中，当我想进入另一个屏幕时，我单击一个按钮进入另一个屏幕，屏幕的名称出现在页面顶部，但看起来像还是第一屏。我不明白怎么回事

查看组件的配置 getter 回调，

你能告诉我怎么做吗？非常感谢。

import React from 'react'
import { Image } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { createStackNavigator} from "@react-navigation/stack"
import { NavigationContainer } from '@react-navigation/native'
import Authentication from '../../Screens/Authentication'
import Login from '../../Screens/Authentication'
import Signup from '../../Screens/Authentication'
import Tools from '../../Screens/Tools'
import Dashboard from '../../Screens/Dashboard'
import Settings from '../../Screens/Settings'
import Scan from '../../Screens/Tools'
import i18n from '../../src/i18n'

const Tab = createBottomTabNavigator();
const Stack = createStackNavigator();

function ScreenNavigator() {
  return(
<Stack.Navigator>
  <Stack.Screen name = 'Authentication' component = {Authentication}/>
  <Stack.Screen name = 'Login' component = {Login}/>
  <Stack.Screen name = 'Signup' component = {Signup}/>
  <Stack.Screen name = 'Tools' component = {Tools}/>
  <Stack.Screen name = 'Scan' component = {Scan}/>
  <Stack.Screen name = 'Dashboard' component = {Dashboard}/>
  <Stack.Screen name = 'Settings' component = {Settings}/>
</Stack.Navigator>
  )
}

export default function AppNavigation() {
  return (
    <NavigationContainer>
      <Tab.Navigator initialRouteName="Feed"
                     tabBarOptions={{activeTintColor: '#F78400'}}>
        <Tab.Screen
          name={i18n.t("app.auth")}
          component={ScreenNavigator}
          options={{
              tabBarIcon: ({ focused, horizontal, tintColor }) => {
                return (
                  <Image
                    source={require("../../assets/images/authentication.jpg")}
                    style={{ width: 20, height: 20 }}
                  />
                );
              }
          }}
        />
        <Tab.Screen
          name={i18n.t("app.dash")}
          component={Dashboard}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/dashboard.png")}
                  style={{ width: 20, height: 20 }}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("app.tools")}
          component={Tools}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/tools.png")}
                  style={{ width: 20, height: 20 }}
                />
              );
            }
          }}
        />
        <Tab.Screen
          name={i18n.t("app.settings")}
          component={Settings}
          options={{
            tabBarIcon: ({ focused, horizontal, tintColor }) => {
              return (
                <Image
                  source={require("../../assets/images/settings.png")}
                  style={{ width: 20, height: 20 }}
                />
              );
            }
          }}
        />
      </Tab.Navigator>
    </NavigationContainer>
  )
}

Answer 1

初始化导航时没有传递组件

以下代码

 <Stack.Screen name = 'Authentication' component = 'Authentication'/>

您已经为导致错误的组件传递了一个字符串，这应该更改为

 <Stack.Screen name = 'Authentication' component = {Authentication}/>

您还必须更改堆栈中的其他屏幕