react-native - 我的 OnPress 没有链接到我制作的屏幕

问题描述

我在抽屉导航中有 3 个屏幕，在堆栈导航中有 1 个屏幕。

应用程序.js

const Stack = createStackNavigator();
function Navigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Spelare" component={PlayersScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}
const Drawer = createDrawerNavigator();
export default function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Hem"
        drawerPosition="right"
        drawerType="slide">
        <Drawer.Screen
          name="Hem"
          component={HomeScreen}
          style={styles.drawerItem}
        />
        <Drawer.Screen
          name="Kontakt"
          style={{ color: 'red' }}
          component={ContactScreen}
        />
   
        <Drawer.Screen
          name="Spelare"
          style={{ color: 'red' }}
          component={PlayersScreen}
        />
      </Drawer.Navigator>
    </NavigationContainer>
   
  );
};


function StackNavigator() {
  return (
    <NavigationContainer>
    <Drawer.Navigator
      initialRouteName="Hem"
      drawerPosition="right"
      drawerType="slide">
      <Drawer.Screen
        name="Hem"
        component={HomeScreen}
        style={styles.drawerItem}
      />
      <Drawer.Screen
        name="Kontakt"
        style={{ color: 'red' }}
        component={ContactScreen}
      />
      {/* Look down ... */}
      <Drawer.Screen
        name="Details"
        style={{ color: 'red' }}
        component={DetailsScreen}
      />
    </Drawer.Navigator>
  </NavigationContainer>
  );
}

在 PlayersScreen 上，我有一个 FlatList 呈现名称，当单击一个名称时，我希望它将用户带到详细信息屏幕并仅加载该人。当在抽屉导航器中有 DetailsScreen 时，这一切都有效，但我不希望它显示在应用程序的抽屉菜单中。

FlatList，PlayerScreen 内部，也在 App.js 文件中

<FlatList
            data={data}
            keyExtractor={item => item.Name}
            renderItem={({ item }) => (
      <View style={{alignItems: 'center', backgroundColor: '#25D495',  borderRadius: 15, fontFamily: 'Roboto, sans-serif', marginBottom: 15, height: 40}}>
          <Text 
            style={styles.listStyle} onPress={() => {navigation.navigate('Details', {itemId: item._id})}}>{item.Name}
          </Text>
      </View>
            )}
          />

我收到以下错误：任何导航器都没有处理“导航”操作，您是否有一个名为“详细信息”的屏幕？

任何帮助表示赞赏。

标签： react-nativenavigation

我建议你用这样的方式替换Spelare屏幕。drawerStackNavigator

首先创建一个同时具有PlayersScreen, 和DetailsScreen

  const Stack = createStackNavigator();
  function StackNavigator() {
    return (
      <Stack.Navigator>
        <Stack.Screen name="Spelare" component={PlayersScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    );
  }

第二用您创建的替换您PlayersScreen的主抽屉导航器Stack

  return (
    <NavigationContainer>
      <Drawer.Navigator
        initialRouteName="Hem"
        drawerPosition="right"
        drawerType="slide">
        <Drawer.Screen
          name="Hem"
          component={HomeScreen}
          style={styles.drawerItem}
        />
        <Drawer.Screen
          name="Kontakt"
          style={{ color: 'red' }}
          component={ContactScreen}
        />
        {/* Look down ... */}
        <Drawer.Screen
          name="SpelareStack"
          style={{ color: 'red' }}
          component={Stack}
        />
      </Drawer.Navigator>
    </NavigationContainer>
  );

react-native - 我的 OnPress 没有链接到我制作的屏幕 - React Native

问题描述

解决方案

推荐阅读