React Native使用React Navigation无法跳转页面的问题求助

嘿，作为新手遇到这种导航问题真的很挠头，我来帮你理理～先看最核心的问题，你现在的代码里有个一眼就能看到的错误，先把它改了应该就能解决跳转没反应的问题！

最关键的错误：跳转目标页面名称写错了 #

你在MyTable组件的Navegar函数里写的是：

const Navegar = () => {
  navigation.navigate("MyTable");
};

但你的App.js里的导航栈根本没有注册名为"MyTable"的页面啊！你要跳转到的是Description页面对吧？所以这里的页面名称必须和App.js里Stack.Screen的name属性完全一致，也就是改成：

const Navegar = () => {
  navigation.navigate("Description");
};

还要检查这些小细节，避免其他报错 #

• 组件导入是否完整：你的MyTable代码里用了SafeAreaView、View、Text、TouchableOpacity这些组件，但没看到导入语句，记得在文件顶部加上：

  import { SafeAreaView, View, Text, TouchableOpacity } from 'react-native';
  

  不然会出现组件未定义的错误。
• 不要把跳转函数放到组件外部：你之前把Navegar移到组件外导致权限错误，是因为外部无法访问组件的navigation props，所以这个函数必须放在MyTable组件内部，新手阶段老老实实使用组件传进来的navigation就好。

修改后的MyTable核心代码示例 #

import { SafeAreaView, View, Text, TouchableOpacity } from 'react-native';
// 别忘了导入你的样式文件
import tableStyle from './你的样式文件路径';

export default function MyTable({navigation}) {
  // 修正跳转目标页面名称
  const Navegar = () => {
    navigation.navigate("Description");
  };

  return(
    <SafeAreaView style={tableStyle.table}>
      <View style={tableStyle.header}>
        <Text style={tableStyle.headerCell}>Nome</Text>
        <Text style={tableStyle.headerCell}>Comida Favorita</Text>
        <Text style={tableStyle.headerCell}>Ver mais</Text>
      </View>
      <View style={tableStyle.row}>
        <Text style={tableStyle.cell}>Anthony</Text>
        <Text style={tableStyle.cell}>Salgadinho</Text>
        <TouchableOpacity style={tableStyle.cell} onPress={Navegar}>
          <Text style={tableStyle.text}>Clique Aqui</Text>
        </TouchableOpacity>
      </View>
    </SafeAreaView>
  );
}

等你把这个核心错误改了之后，点击按钮应该就能正常跳转到Description页面啦！后面你要传参的话，只需要在navigate里加第二个参数，比如：

navigation.navigate("Description", { 
  nome: "Anthony", 
  comidaFavorita: "Salgadinho" 
});

然后在Description组件里通过route.params接收：

const Description = ({navigation, route}) => {
  const { nome, comidaFavorita } = route.params;
  return(
    <SafeAreaView>
      <Text>About {nome}</Text>
      <Text>Comida Favorita: {comidaFavorita}</Text>
    </SafeAreaView>
  )
}

不过这是后话，先把跳转的问题搞定再说～

内容来源于stack exchange