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

在屏幕之间进行路由时，您可以通过以下代码在CalcScreen组件中获取 num 值：

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

Answer 2

通过将参数作为对象的第二个参数从第一个屏幕导航到导航，将参数传递给路线。使用：

this.props.navigation.navigate（'RouteName'，{/ * params go here * /}）
在第二个屏幕中阅读参数。使用：

this.props.navigation.getParam（paramName，defaultValue）

这是完整的工作示例，link

Answer 3

使用道具我们使用props在react native中将数据从一类传递到另一类或从一页传递到另一页。

https://reactnative.dev/docs/props

我如何将数据从屏幕传递到React Native中的另一个屏幕？

3 个答案: