React Native：在来自不同组件的嵌套导航器之间导航

Question

我正在构建一个应用程序，其中包含一个主选项卡导航器，然后是其中的几个嵌套堆栈导航器。我所有的导航器都写在App.js 文件中。主选项卡导航器工作正常，但是当我尝试导航到其中一个嵌套堆栈导航器时，我收到 TypeError: undefined is not an object (evaluating _this.props.navigation) 错误。

下面是我的代码示例：

App.js 文件

    import React from 'react;
    import {createMaterialBottomTabNavigator} from '@react-navigation/material-bottom-tabs';
    import {NavigationContainer} from '@react-navigation/native';
    import {createStackNavigator} from '@react-navigation/stack';
    import Home from './src/screens/Home';
    import Settings from './src/screens/Settings';
    import Privacy from './src/screens/Privacy';

    const PrivacyStack = createStackNavigator();
    const SettingsStack = createStackNavigator();
const AuthStack = createStackNavigator();
const MainStack = createStackNavigator();
    const Tabs = createMaterialBottomTabNavigator();

    const TabNavigator = () => {
     return (
    <Tabs.Navigator
    initialRouteName="Home"
    <Tabs.Screen
    name="Home"
    component={HomeStack}
    />
    Tabs.Screen
    name="Settings"
    component={SettingsStack}
    children={this.SettingsStack}
    </Tabs.Navigator>
    )
    }

const AuthStack = () => (
  <AuthStack.Navigator>
    <AuthStack.Screen
      name="Auth"
      component={Auth}
    />
  </AuthStack.Navigator>
);


    const SettingsStackScreen = () => (
      <SettingsStack.Navigator>
        <SettingsStack.Screen
          name="Settings"
          component={Settings}
        />
        <SettingsStack.Screen
          name="Privacy"
          component={PrivacyStack}

        />
      </SettingsStack.Navigator>
    );

    const PrivacyStack = () => (
      <PrivacyStack.Navigator>
        <PrivacyStack.Screen
          name="Privacy"
          component={Privacy}
        />
        <PrivacyStack.Screen
          name="Notifications"
          component={Notifications}

        />
      </PrivacyStack.Navigator>
    );

const App = () => {
return (
    <NavigationContainer ref={navigationRef}>
      <MainStack.Navigator>
        <MainStack.Screen name="Tabs" component={TabNavigator} />
        <MainStack.Screen
          name="Auth"
          component={AuthStack}
          options={{gestureEnabled: false}}
        />
      </MainStack.Navigator>
    </NavigationContainer>
)
}

Settings.js 文件

import React from 'react';
import {TouchableOpacity} from 'react-native;

const Settings = (navigation, props) => {
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('PrivacyStack', {screen: 'Privacy'}
)
}
</TouchableOpacity>

export default Settings

Privacy.js 文件

import React from 'react';
import {TouchableOpacity} from 'react-native;

const Privacy = (navigation, props) => {
return (
<TouchableOpacity onPress={() => this.props.navigation.navigate('Notifications'
)
}
</TouchableOpacity>

export default Privacy

用户通过身份验证后，他们会被带到MainStack，它有一个底部选项卡导航器，带有Home 屏幕选项和Settings 屏幕选项。 这部分目前一切正常。但是，一旦我在Settings 屏幕上单击<TouchableOpacity>，我就会收到错误消息。

我怀疑这一定是我使用this.props.navigation 的方式有问题，但是我没有通过自己的故障排除解决问题。任何帮助将不胜感激。

Answer 1

您正在使用功能组件，因此您可以使用如下导航

const Settings = (props) => {
return (
<TouchableOpacity onPress={() => props.navigation.navigate('PrivacyStack', 

'navigation' 作为 props 传递，并将驻留在 props 参数中。