我如何將數據從屏幕上傳遞到 React Native 中的另一個？

Question

我在嘗試將一些數據傳遞到另一個屏幕時遇到問題。 當前使用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;

任何幫助將非常感激！

Answer 1

當Screens之間發生路由時，那么可以通過以下代碼獲取CalcScreen組件中的num值：

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

Answer 2

1. 通過將參數作為第二個參數放入一個對象中，將參數傳遞給路由，作為來自 First Screen 的 navigation.navigate 函數。 使用 ：

   this.props.navigation.navigate('RouteName', { /* params go here */ })

2. 閱讀第二個屏幕中的參數。 使用：

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

這是完整的工作示例， 鏈接

Answer 3

使用props在 react native 中，我們使用 props 將數據從一個類傳遞到另一個類或從一個頁面傳遞到另一個類。

https://reactnative.dev/docs/props