React Native：将导航路线作为道具传递给动态呈现的组件

Question

我正在构建一个应用程序，其中几个屏幕具有动态呈现的卡片，这些卡片映射到名为ENTRIES 的对象数组。可以按下这些卡片中的每一个来导航到相应的屏幕，但是，我似乎无法让导航工作。

我将 ENTRIES 中的 screen 值作为道具从 Settings.js 屏幕传递到 ClickableCard 组件，然后将其作为 this.props.navigation.navigate(screen) 传递到 TouchableOpacity onClick。

但是我不断收到以下错误TypeError: undefined is not an object (evaluating '_this3.props.navigation.navigate')

下面是代码示例：

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 SettingsScreen from './src/screens/SettingsScreen';
    import PrivacyScreen from './src/screens/PrivacyScreen';
    import NotificationsScreen from './src/screens/NotificationsScreen';
    import SoundsScreen from './src/screens/SoundsScreen';
    import ThemeScreen from './src/screens/ThemeScreen';

    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.Screen
          name="Theme"
          component={ThemeScreen}

        />
        <SettingsStack.Screen
          name="Notifications"
          component={NotificationsScreen}

        />
        <SettingsStack.Screen
          name="Sound"
          component={SoundsScreen}

        />
      </SettingsStack.Navigator>
    );

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

        />
      </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, {Component} from 'react';
    import {TouchableOpacity, ScrollView} from 'react-native;
import ClickableCard from './ClickableCard'

        export default class Settings extends Component {
        render(screen, index) {
        return (
                  <ScrollView>
                    {ENTRIES.map((entry, index) => (
    <ClickableCard screen={entry.screen} key={entry.index}/>

                    ))}
                  </ScrollView>
        )
        }

        export default Settings

ClickableCard.js 组件

                import React, {Component} from 'react';
                import {TouchableOpacity, ScrollView} from 'react-native;

                    export default class ClickableCard extends Component {
          constructor(props) {
            super(props);
        }
                    render() {

const {
screen,
key
} = this.props
                    return (
                            <TouchableOpacity

                                key={key}
                                onPress={() => this.props.navigation.navigate(screen)}>
                              </TouchableOpacity>
                    )
                    }
    }

entries.js 文件

import React from 'react';

export const ENTRIES = [
{
name: "Theme",
screen: "ThemeScreen",
},
{
name: "Sounds",
screen: "SoundsScreen",
},
{
name: "Notifications",
screen: "NotificationsScreen",
},
] 

Answer 1

您正在尝试访问导航堆栈之外的导航。

如果您使用的是功能组件，则可以使用 useNavigation 挂钩，但由于这是一个基于类的组件，您必须将导航作为道具发送，或者您可以按照documentation 中的建议执行以下操作

import { useNavigation } from '@react-navigation/native';
class ClickableCard extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { screen, key } = this.props;
    return (
      <TouchableOpacity
        key={key}
        onPress={() =>
          this.props.navigation.navigate(screen)
        }></TouchableOpacity>
    );
  }
}

const ClickableCardWithNavigation= (props) {
  const navigation = useNavigation();

  return <ClickableCard {...props} navigation={navigation} />;
}

export default connect(ClickableCardWithNavigation)(TodoList)