任何导航器都没有>处理有效负载 { "name" ： "Map_map" } 的操作"导航"

Question

当我点击Primary.js 中的任何按钮时，都会出现错误

错误：

未处理有效负载为｛"name"："Map_Map"｝的操作"NAVIGATE"通过任何导航器。您有一个名为"Map_Map"的屏幕吗？

文件结构：

• app.js
• 导航(文件夹(
  • MainContainer.js
    • 屏幕(文件夹(
      • Primary.js/试图从中获取
      • Secondary.js
      • 映射_Map.js/到此

-App.js(仅包含MainContainer.js

MainContainer.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
// Screens
import Primary from './Screens/Primary';
import Secondary from './Screens/Secondary';
import Map_map from './Screens/Map_map';
// Locations
const mesta = [
{
name: 'Praha', 
coordinates: {
latitude: 50.072829,
longitude: 14.433817 
}},
, 
{
name: 'České Budějovice',
coordinates: {
latitude: 48.975250,
longitude: 14.479161
}},
,  
{
name: 'Plzeň',
coordinates: {
latitude: 49.739296,
longitude: 13.372455
}},

{
name: 'Karlovy Vary', 
coordinates: {
latitude: 50.231656,
longitude: 12.869226
}},
{
name: 'Ústí nad Labem', 
coordinates: {
latitude: 50.662592,
longitude: 14.042824
}},
{
name: 'Liberec', 
coordinates: {
latitude: 50.764136,
longitude: 15.047840
}},
{
name: 'Hradec Králové', 
coordinates: {
latitude: 50.210071,
longitude: 15.829660
}},
{
name: 'Pardubice', 
coordinates: {
latitude: 50.032558,
longitude: 15.773678
}},
{
name: 'Jihlava', 
coordinates: {
latitude: 49.401642,
longitude: 15.584001
}},
{
name: 'Brno', 
coordinates: {
latitude: 49.190254,
longitude: 16.614144
}},
{
name: 'Olomouc', 
coordinates: {
latitude: 49.590450,
longitude: 17.259280
}},
{
name: 'Ostrava',
coordinates: {
latitude: 49.820469,
longitude: 18.269387
}},
{
name: 'Zlín',
coordinates: {
latitude: 49.224215,
longitude: 17.668567
}},
]
//Screen names
const lokace = "Lokace";
const mapa = "Mapa";
const mapa_det = "Mapa_det";
const Tab = createBottomTabNavigator();
function MainContainer() {
return (
<NavigationContainer>
<Tab.Navigator
initialRouteName={lokace}
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
let rn = route.name;
if (rn === lokace) {
iconName = focused ? 'home' : 'home-outline';
} else if (rn === mapa) {
iconName = focused ? 'map' : 'map-outline';
}
else if (rn === mapa_det) {
iconName = focused ? 'locate' : 'locate-outline';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
})}
tabBarOptions={{
activeTintColor: '#007aff',
inactiveTintColor: 'grey',
labelStyle: { paddingBottom: 10, fontSize: 10 },
style: { padding: 10, height: 70}
}}>
<Tab.Screen name={lokace} children={() => <Primary towns={mesta}/>}/>
<Tab.Screen name={mapa} children={() => <Secondary towns={mesta}/>}/>
<Tab.Screen name={mapa_det} component={Map_map}/>
</Tab.Navigator>
</NavigationContainer>
);
}
export default MainContainer;

Primary.js

import * as React from 'react';
import { StyleSheet, ScrollView, View, Text, Image } from 'react-native';
import { useNavigation } from '@react-navigation/native';

export default function Primary(props, {Map_map})
{
const navigation = useNavigation();
const map_map = "Map_map";
return(
<ScrollView style=
{{ 
flex: 1,
}}>
<View>
{props.towns.map(itemz => (
<Text 
style={styles.card} 
onPress={() => navigation.navigate(map_map)}                    >
{itemz.name}
</Text>
))}
</View>
</ScrollView>
);
}
const styles = StyleSheet.create({
card:{
backgroundColor: "#007aff",
borderRadius: 50,
alignItems: 'center',
margin: 5,
padding: 10,
color: 'white',
fontWeight: 'bold'
},
card2:{
backgroundColor: "#FF3300",
borderRadius: 50,
alignItems: 'center',
margin: 5,
padding: 10,
color: 'white',
fontWeight: 'bold'
},
});

Answer 1

您应该使用name道具而不是组件名称进行导航。

<Tab.Screen name={mapa_det} component={Map_map}/>

所以，它应该是：

navigation.navigate("Mapa_det")