React Native中如何通过react-navigation传递JSON数据至下一页

嘿，我看你作为React Native初学者，在页面跳转传递完整JSON数据这块卡壳了，咱们一步步来把这个问题解决掉～

先说说你当前代码里的问题 #

1. 第一页跳转时只传了手机号：你现在在navigation.navigate里只传递了mobileno : UserMNO，并没有把服务器返回的完整responseJson数据传过去，所以第二页自然拿不到其他用户信息。
2. 第二页参数名不匹配：你在第二页用this.props.navigation.getParam("Name")、getParam("EmailId")这些参数名，但第一页根本没传这些字段，而且服务器返回的字段是firstname、email这类，和你写的参数名也对应不上。

解决方案步骤 #

1. 修改第一页的跳转代码，传递完整用户数据

从你打印的console.log(responseJson[0]);来看，服务器返回的是一个包含用户对象的数组，所以我们把数组里的第一个用户对象完整传递过去：

// 替换你原来的navigation.navigate代码
this.refs.toast.show('Login successful', 500, () => {
  const { navigation } = this.props;
  // 把responseJson里的完整用户对象传过去
  navigation.navigate("Profile", {
    userData: responseJson[0]
  });
});

注意：如果服务器返回的responseJson本身就是一个用户对象（不是数组），那直接写userData: responseJson就行。

2. 修改第二页的代码，接收并使用完整用户数据

在第二页里，我们先获取传递过来的userData，然后从中取出对应的字段来展示：

// 可以在组件的render方法开头先获取数据
render() {
  // 取出传递的用户数据，第二个{}是默认值，防止没传数据时报错
  const userData = this.props.navigation.getParam("userData", {});
  // 也可以用解构赋值直接取出需要的字段
  const { firstname, lastname, email, mobileno, profession } = userData;

  return (
    <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">
            {/* 拼接姓名 */}
            {`${firstname || ''} ${lastname || ''}`}
          </Text>
          <Block width={width * 0.8} style={{ marginBottom: 15 }}>
            <Input 
              editable={false} 
              placeholder="Email id" 
              value={email || ''} 
              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={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={profession || ''} 
              style={{borderRadius:30, borderWidth:3}} 
              iconContent={ <Icon size={16} color={argonTheme.COLORS.ICON} name="nav-right" family="ArgonExtra" style={styles.inputIcons} /> } 
            />
          </Block>
        </Block>
      </Block>
    </Block>
  )
}

额外提示 #

• 建议你在第一页的then((responseJson) => {})里打印console.log('完整返回数据:', responseJson)，确认一下返回的JSON结构到底是数组还是对象，字段名是不是和你预期的一致，这能帮你更快定位问题。
• 如果使用的是较新版本的react-navigation（比如v5+），传递和接收数据的方式会变成navigation.navigate('Profile', { userData })和route.params.userData，不过从你的代码来看应该是旧版本，所以用getParam是没问题的。

内容的提问来源于stack exchange，提问作者Aakash Thoriya