在 React Native Navigation 中为 onPress 指定名称或键

Question

我在 Expo 中收到以下错误：“使用对象作为参数调用导航时需要指定名称或键。”

我有一段调用登录选项的主要代码包括：

<LoginOptions title="Don't have a business account?" link="Create a free account" press="CreateAccount"/>

我正在尝试将导航目的地作为“变量?? - 不确定正确的词是什么”。登录选项如下所示：

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';

import { useNavigation } from '@react-navigation/native';

import defaultStyles from "../../config/styles";

function LoginOptions ({title, link, press }) {
    const navigation = useNavigation();
    return (
    <View>
        <Text style={defaultStyles.logBold}>
        {title}
        </Text>
        <TouchableWithoutFeedback onPress={() => navigation.navigate({press})} >
            <Text style={defaultStyles.logUnder} >
            {link}
            </Text>
        </TouchableWithoutFeedback>
    </View>
    );
}

export default LoginOptions;

Answer 1

将其作为 loginOption 的道具传递

 <LoginOptions navigation={navigation} title="Don't have a business account?" link="Create a free account" press={"CreateAccount"}/>

然后

import React from 'react';
import { View, Text, TouchableWithoutFeedback } from 'react-native';



import defaultStyles from "../../config/styles";

function LoginOptions ({title, link, press ,navigation}) {
    return (
    <View>
        <Text style={defaultStyles.logBold}>
        {title}
        </Text>
        <TouchableWithoutFeedback onPress={() => navigation.navigate(press)} >
            <Text style={defaultStyles.logUnder} >
            {link}
            </Text>
        </TouchableWithoutFeedback>
    </View>
    );
}

export default LoginOptions;

Answer 2

首先，在 StackScreen 中声明您的屏幕

Guide here

然后，修复您的 navigate 操作： onPress={() => navigation.navigate("ScreenNameYouDefinedAbove")}

P/s：我认为您在 React Native 中使用了 ReactJS 路由机制。 React Navigation 有自己的路由定义，请参考文档。

在 React Native Navigation 中为 onPress 指定名称或键

Specify name or key for onPress in React Native Navigation

react-native

react-native-navigation