React Native出现Unexpected Token报错 导航跳转代码问题如何修复

核心错误（直接导致Unexpected Token报错） #

你代码中给navigation.navigate传递参数的对象语法错误：JavaScript对象字面量的键值对需要用冒号:分隔，你用了等号=，所以{name='Tela02'}属于非法语法。

其他需要同步修复的隐藏问题 #

• 缺失React Native基础组件导入：使用了View、Button组件但未从react-native包中引入
• 导航API拼写错误：@react-navigation/stack导出的创建栈导航方法为createStackNavigator，你写成了createStackNavigation，缺少末尾的or后缀
• 跳转页面名不匹配：Tela02页面跳转目标的名称要和Stack.Screen定义的name属性一致，你定义的首页name是Principal，跳转时不能写TelaPrincipal

修复步骤 #

1. 两处navigation.navigate调用的传参对象，把=替换为:：
   修改前：onPress= {() => navigation.navigate('Tela02', {name='Tela02'})}
   修改后：onPress= {() => navigation.navigate('Tela02', {name: 'Tela02'})}
   同理修改Tela02页面里的跳转逻辑
2. 新增View、Button的导入语句：

   import { View, Button } from 'react-native';
   

3. 修正栈导航创建方法的拼写：
   修改前：import {createStackNavigation} from '@react-navigation/stack';
   修改后：import {createStackNavigator} from '@react-navigation/stack';
   同时把后续调用的const Stack = createStackNavigation();同步改为const Stack = createStackNavigator();
4. 修正Tela02页面跳转的目标页面名为Principal

修复后完整代码 #

import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Button } from 'react-native';
import {NavigationContainer} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

const Stack = createStackNavigator();

const MyStack = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator>
            <Stack.Screen 
                    name="Principal"
                    component={TelaPrincipal}
                    options={{title:'Bem Vindo à tela principal'}}
              ></Stack.Screen>
              <Stack.Screen 
                name="Tela02"
                component={Tela02}
                options={{title:'Bem Vindo à tela 02'}}
              ></Stack.Screen>
            </Stack.Navigator>
        </NavigationContainer>
    );

};

const TelaPrincipal = ({navigation}) => {
    return(
        <View>
            <Button
                title = 'Ir para Tela 02'
                onPress= {() => navigation.navigate('Tela02', {name: 'Tela02'})}
            ></Button>
        </View>
    );

};

const Tela02 = ({navigation}) => {
    return(
        <View>
            <Button
                title = 'Ir para Tela Principal'
                onPress= {() => navigation.navigate('Principal', {name: 'Principal'})}
            ></Button>
        </View>
    );

};

export default MyStack;

内容的提问来源于stack exchange，提问作者Lucas Alves