Question

我是一个初学者，仍然在学习对母语的反应。

在我的本地本机应用程序中，我有2个屏幕。在第一页中，我有JSON数据[从实时服务器中获取]；我想将此JSON数据传递到下一页。

我使用react-navigation在页面之间进行导航。我向下一页传递了一个数据[手机号码]。

但是我不知道如何将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);
      });

  }

第一页JSON数据的console.log

第二页代码：[我需要JSON数据的地方]

     <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>

第二个屏幕的截图

错误

什么都没通过

Answer 1

您可以像这样发送响应JSON：

navigation.navigate(
              "Profile", 
              {mobileno: UserMNO, myJSON: responseJson} 
);

并在第二个屏幕中获取它：

const responseJson = this.props.navigation.getParam("myJSON");

将JSON数据传递到React Native中的下一页

1 个答案: