Javascript React Native：使用导航和映射到阵列的动态组件

我正在构建一个应用程序，其中几个屏幕动态呈现了映射到名为

条目

的对象数组的卡片。这些卡中的每一张都可以按导航到相应的屏幕，但是我似乎无法让导航正常工作

我一直遇到以下错误

error:当调用以对象作为参数的navigate时，需要指定名称或键。

我正在将

屏幕

值从

条目

传递到我的

this.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>
)
}

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

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

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

    export default Settings

import React from 'react';

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

---

render函数不接受任何参数。应该使用entry.screen访问阵列中的屏幕

render() {
    return (
              <ScrollView>
                {ENTRIES.map((entry, index) => (
                  <TouchableOpacity
                    key={entry.name}
                    onPress={() => this.props.navigation.navigate(entry.screen)}>
                  </TouchableOpacity>
                ))}
              </ScrollView>
    )
    }

render（）{
返回(
{ENTRIES.map（（条目，索引）=>(
this.props.navigation.navigate（entry.screen）}>
))}
)
}