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屏幕选项。 这部分目前一切正常。但是，一旦我在<TouchableOpacity>屏幕上单击Settings，就会收到错误消息。

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

Answer 1

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

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

“导航”作为道具传递，并将驻留在道具参数中。

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

1 个答案: