Question

我正在构建一个应用程序，其中多个屏幕具有动态渲染的卡片，这些卡片映射到称为.doOnError(e -> { if(e instanceof ValidationException) { } else { } })的对象数组。这些卡中的每一张都可以按一下以导航到相应的屏幕，但是我似乎无法使导航正常工作。

我不断收到以下错误ENTRIES

我正在将Error: You need to specify name or key when calling navigate with an object as the argument.中的screen值传递到我的ENTRIES中，当按下this.props.navigation.navigate时，该值应直接指向该屏幕。

这是以下代码的示例：

App.js文件

<TouchableOpacity>

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

entries.js文件

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

Answer 1

render函数不接受任何参数。并且应该使用entry.screen

访问数组中的屏幕。

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

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

1 个答案: