Блог

Главная - Вопросы по программированию - Как я могу передавать данные с экрана на другой в React Native?

Как я могу передавать данные с экрана на другой в React Native?

#javascript #reactjs #react-native #react-navigation

#javascript #reactjs #react-native #реагировать-навигация

Вопрос:

У меня возникли проблемы при попытке передать некоторые данные на другой экран. В настоящее время используется useState перехват, и я хотел бы использовать значение на следующем экране.

NumScreen.JS:

 import React, { useState } from "react";
import { Text, TextInput, Button, View, StyleSheet, TouchableOpacity } from "react-native";

function NumScreen({ navigation }) {

  const [num, setNum] = useState("0");


  const pressHandler1 = () => {
    navigation.navigate("CalcScreen", { num });
  }



  const Separator = () => (
    <View style={styles.separator} />
  );


  return (
    <View style={styles.container}>
      <Text>Enter Number of People:</Text>
      <TextInput
        returnKeyType="done"
        keyboardType="numeric"
        style={styles.input}
        placeholder="e.g. 3"
        onChangeText={(val) => setNum(val)}
      />
      <Text> Number: {num} </Text>

      <Separator />
      <TouchableOpacity onPress={pressHandler1}>
        <Text style={styles.button}>Submit</Text>
      </TouchableOpacity>

    </View>
  );
}

export default NumScreen;

Я хочу получить значение num на следующий экран, я попытался отправить значение, используя navigation.navigate затем попытался использовать getParam, но это не сработало.

 import React, { useState } from 'react';
import { Text, TextInput, Button, View, StyleSheet, TouchableOpacity } from "react-native";


function CalcScreen({ navigation }) {
    const [tot, setTot] = useState("0");
    const ppl = navigation.getParam(num);


    const Separator = () => (
        <View style={styles.separator} />
    );

    return (
    <View style={styles.container}>
      <Text> num: {ppl} </Text>
      <Text>Enter Total Amount:</Text>
      <TextInput
        returnKeyType="done"
        keyboardType="numeric"
        style={styles.input}
        placeholder="e.g. 5.50"
        onChangeText={(val1) => setTot(val1)}
      />
      <Text> Total: {tot} </Text>
      </View>
    );
}

export default CalcScreen;

Любая помощь будет высоко оценена!

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

1. Попробуйте использовать библиотеки управления состоянием, такие как redux .

2. Откуда navigation.navigate берется? Я предполагаю, что react-navigation v5, но вы не отметили его. Я использовал его и никогда не сталкивался с проблемами с параметрами, вы читали их документ?

3. В react navigation 5 навигация не содержит переданных параметров.

Ответ №1:

Когда происходит маршрутизация между экранами, вы можете получить значение num в CalcScreen компоненте с помощью следующего кода:

 function CalcScreen({ navigation, route }) {
  const { num } = route.params;

Ответ №2:

  1. Передайте параметры маршруту, поместив их в объект в качестве второго параметра функции navigation.navigate с первого экрана. Используя :

    this.props.navigation.navigate(‘routeName’, { /* параметры идут сюда */ })

  2. Прочитайте параметры на втором экране. Используя:

    this.props.navigation.getParam(ParamName, defaultValue)

вот полный рабочий пример, ссылка

Ответ №3:

Использование props Мы используем props для передачи данных из одного класса в другой или с одной страницы на другую в react native.

https://reactnative.dev/docs/props