[英]How would I pass data from on screen to another in React Native?
I am having trouble trying to pass some data to another screen.我在尝试将一些数据传递到另一个屏幕时遇到问题。 Currently using the useState
hook and I would like to use the value on the next screen.当前使用useState
钩子,我想在下一个屏幕上使用该值。
NumScreen.JS: 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;
I want to get the num value to the next screen, I tried sending the value using navigation.navigate
then tried to use getParam but this did not work.我想将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;
Any help would be much appreciated!任何帮助将非常感激!
When the routing between Screens happens, then you can get the num value in the CalcScreen
component by the following code:当Screens之间发生路由时,那么可以通过以下代码获取CalcScreen
组件中的num值:
function CalcScreen({ navigation, route }) {
const { num } = route.params;
Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function from First Screen.通过将参数作为第二个参数放入一个对象中,将参数传递给路由,作为来自 First Screen 的 navigation.navigate 函数。 Using :使用 :
this.props.navigation.navigate('RouteName', { /* params go here */ }) this.props.navigation.navigate('RouteName', { /* params go here */ })
Read the params in your Second screen.阅读第二个屏幕中的参数。 Using:使用:
this.props.navigation.getParam(paramName, defaultValue) this.props.navigation.getParam(paramName, defaultValue)
Using props We use props to pass data from one class to another or from one page to another in react native.使用props在 react native 中,我们使用 props 将数据从一个类传递到另一个类或从一个页面传递到另一个类。
https://reactnative.dev/docs/props https://reactnative.dev/docs/props
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.