Укажите имя или ключ для onPress в React Native Navigation

#react-native #react-native-navigation

#react-native #react-native-навигация

Вопрос:

В Expo я получаю следующую ошибку: «Вам необходимо указать имя или ключ при вызове navigate с объектом в качестве аргумента».

У меня есть основная часть кода, вызывающая LoginOptions, которая включает:

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

Я пытаюсь передать назначение навигации как «переменную?? — не уверен, какое правильное слово «. LoginOptions выглядит следующим образом:

 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;
 

Комментарии:

1. какое действие вы хотите? Открыть новую ссылку во внешнем браузере или перейти на другой экран в вашем приложении?

2. Пожалуйста, перейдите на другой экран в приложении.

Ответ №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;
 

Ответ №2:

во-первых, объявите свой экран в StackScreen

Руководство здесь

затем исправьте свое navigate действие: onPress={() => navigation.navigate("ScreenNameYouDefinedAbove")}

P / s: я думаю, вы используете механизм маршрутизации ReactJS внутри React Native. У React Navigation есть собственное определение маршрутизации, пожалуйста, следуйте документам.