Javascript 将JSON数据传递到react native中的下一页
我是一个初学者,仍在学习如何反应 在我的react原生应用程序中,我有两个屏幕。 在第一页中,我有JSON数据[从live server获取]; 我想把这个JSON数据传递到下一个页面 我使用react导航在页面之间导航。 我将一个数据[手机号码]传递到下一页 但我不知道如何将JSON数据传递到下一页 第一页代码:[包含JSON数据]Javascript 将JSON数据传递到react native中的下一页,javascript,json,react-native,Javascript,Json,React Native,我是一个初学者,仍在学习如何反应 在我的react原生应用程序中,我有两个屏幕。 在第一页中,我有JSON数据[从live server获取]; 我想把这个JSON数据传递到下一个页面 我使用react导航在页面之间导航。 我将一个数据[手机号码]传递到下一页 但我不知道如何将JSON数据传递到下一页 第一页代码:[包含JSON数据] constructor(props) { super(props) this.state = { UserMNO: '' }
constructor(props) {
super(props)
this.state = {
UserMNO: ''
}
}
UserLoginFunction = () =>{
const { UserMNO } = this.state;
const {firstname} = this.state;
const {lastname} = this.state;
const {email} = this.state;
const {profession} =this.state;
fetch('http://demo.weybee.in/react/User_Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
mobileno: UserMNO,
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson != 'Enter valid phone number' )
{
console.log(responseJson[0]);
console.log(responseJson[1]);
console.log(responseJson[2]);
console.log(responseJson[3]);
//Then open Profile activity and send user email to profile activity.
this.refs.toast.show('Login successful', 500, () => {
const { navigation } = this.props;
const { UserMNO } = this.state ;
navigation.navigate("Profile",
{mobileno : UserMNO},
);
});
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
<Block flex style={styles.profileCard}>
<Block middle style={styles.avatarContainer}>
<Image
source={{ uri: Images.ProfilePicture }}
style={styles.avatar}
/>
</Block>
<Block flex>
<Block middle style={styles.nameInfo}>
<Text bold size={28} color="#32325D">
{this.props.navigation.getParam("Name")}
</Text>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Email id"
value={this.props.navigation.getParam("EmailId")}
style={{marginTop:20, borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Mobile Number"
value={this.props.navigation.getParam("mobileno")}
style={{borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="profession"
value={this.props.navigation.getParam("Profe")}
style={{borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
</Block>
console.log第一页的JSON数据
第二页代码:[我需要JSON数据的地方]
constructor(props) {
super(props)
this.state = {
UserMNO: ''
}
}
UserLoginFunction = () =>{
const { UserMNO } = this.state;
const {firstname} = this.state;
const {lastname} = this.state;
const {email} = this.state;
const {profession} =this.state;
fetch('http://demo.weybee.in/react/User_Login.php', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
mobileno: UserMNO,
})
}).then((response) => response.json())
.then((responseJson) => {
// If server response message same as Data Matched
if(responseJson != 'Enter valid phone number' )
{
console.log(responseJson[0]);
console.log(responseJson[1]);
console.log(responseJson[2]);
console.log(responseJson[3]);
//Then open Profile activity and send user email to profile activity.
this.refs.toast.show('Login successful', 500, () => {
const { navigation } = this.props;
const { UserMNO } = this.state ;
navigation.navigate("Profile",
{mobileno : UserMNO},
);
});
}
else{
Alert.alert(responseJson);
}
}).catch((error) => {
console.error(error);
});
}
<Block flex style={styles.profileCard}>
<Block middle style={styles.avatarContainer}>
<Image
source={{ uri: Images.ProfilePicture }}
style={styles.avatar}
/>
</Block>
<Block flex>
<Block middle style={styles.nameInfo}>
<Text bold size={28} color="#32325D">
{this.props.navigation.getParam("Name")}
</Text>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Email id"
value={this.props.navigation.getParam("EmailId")}
style={{marginTop:20, borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="Mobile Number"
value={this.props.navigation.getParam("mobileno")}
style={{borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
<Block width={width * 0.8} style={{ marginBottom: 15 }}>
<Input
editable = {false}
placeholder="profession"
value={this.props.navigation.getParam("Profe")}
style={{borderRadius:30, borderWidth:3}}
iconContent={
<Icon
size={16}
color={argonTheme.COLORS.ICON}
name="nav-right"
family="ArgonExtra"
style={styles.inputIcons}
/>
}
/>
</Block>
</Block>
{this.props.navigation.getParam(“Name”)}
第二屏截图
错误
不传递任何内容您可以按如下方式发送响应JSON:
navigation.navigate(
"Profile",
{mobileno: UserMNO, myJSON: responseJson}
);
并在第二个屏幕中显示:
const responseJson = this.props.navigation.getParam("myJSON");
您可以使用参数mobileno进行导航。它被传递,正如您所看到的,输入被填充。其他参数是空的,因为您没有将其放在导航参数中,所以我看不到problem@AakashThoriya是的,您可以传递,然后您将收到json数组的第一个对象。最后,数据成功传递!谢谢你贡献了宝贵的时间