在react native的TextInput中获取json数据

时间:2019-06-19 12:26:32

标签: php json react-native

我只是一个初学者,请帮助我!

我想在本机TextInput中获得JSON响应。 [我在本机应用程序中有2页。 在第一页上==>我想要该JSON数据,并使用该JSON响应导航到第二页。

我使用PHP作为服务器端脚本语言。 我的PHP代码是:

<?php

// Importing DBConfig.php file.
include 'DBConfig.php';

// Creating connection.
 $con = mysqli_connect($HostName,$HostUser,$HostPass,$DatabaseName);

 // Getting the received JSON into $json variable.
 $json = file_get_contents('php://input');

 // decoding the received JSON and store into $obj variable.
 $obj = json_decode($json,true);

// Populate column from JSON $obj array and store into $coulmn.
$firstname = $obj['firstname'];
$lastname = $obj['lastname'];
//$mobileno = $obj['mobileno'];
$email = $obj['email'];
$profession = $obj['profession'];
$mobileno = '7874853188';
//Applying User Login query with mobile number match.
$Sql_Query = "select firstname,lastname,email,profession from member where mobileno = '$mobileno' ";

// Executing SQL Query.
$check = mysqli_fetch_array(mysqli_query($con,$Sql_Query));

if(isset($check)){


 $SuccessLoginMsg = 'Data Matched';

 // Converting the message into JSON format.
$SuccessLoginJson = json_encode($SuccessLoginMsg);

 $first_name = $check[0];
 $last_name = $check[1];
 $email = $check[2];
 $profession = $check[3];

// Echo the message.
 echo $SuccessLoginJson ; 
 }

 else{

 // If the record inserted successfully then show the message.
$InvalidMSG = 'Enter valid phone number' ;

// Converting the message into JSON format.
$InvalidMSGJSon = json_encode($InvalidMSG);

// Echo the message.
 echo $InvalidMSGJSon ;

 }

 mysqli_close($con);
?>

以上代码是100%正确的。 [已在网页上测试]

在我的本机代码中,首先我检查手机号码=>如果手机号码正确(数据库中存在),然后该用户可以使用该JSON响应转到下一页。

[响应包含4个字段=名字,姓氏,电子邮件,响应] 我在React Native中的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) => {
        console.log(responseJson);
        // If server response message same as Data Matched
       if(responseJson === 'Data Matched')
        {   

            //Then open Profile activity and send user email to profile activity.
            this.refs.toast.show('Login successful', 500, () => {
            const { navigation } = this.props;

            const  $firstname   = this.state ;
            const $lastname   = this.state ;
            const  $email   = this.state ;
            const  $profession   = this.state ;
            const { UserMNO }  = this.state ;

            navigation.navigate("Profile",
              {EmailId: $email,
              Name: $firstname+$lastname,
              Profe : $profession,
              mobileno : UserMNO,
              });
    });
        }
        else{

          Alert.alert(responseJson);
        }

      }).catch((error) => {
        console.error(error);
      });

  }

我在这里输入手机号码:

enter image description here

我的第二个屏幕[配置文件]-我想要JSON响应的地方

enter image description here

第二个屏幕[配置文件]的基本代码

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

错误提示

道具类型失败:提供给'TextInput'的'对象'类型的道具'值'无效,预期为'字符串'。

2 个答案:

答案 0 :(得分:1)

您似乎收到了一些不是string value的数据。  您只能为文本输入设置string value。检查收到的数据的值,并确保数据为string.

如果您只是想摆脱错误,

navigation.navigate("Profile",
              {EmailId: JSON.stringify($email),
              Name: JSON.stringify($firstname+$lastname),
              Profe : JSON.stringify($profession),
              mobileno : JSON.stringify(UserMNO),
              });

答案 1 :(得分:0)

您没有正确存储在this.state中收到的信息

must call setState()存储信息,然后将其值与此this.state.xxx一起使用

使用this.setState()存储后

# $HOME/.config/sublime-text-3/Packages/node-env.py

import os
import getpass

nvm_path = '/home/%(user)s/.nvm' % {'user': getpass.getuser()}
nvm_default_file_path = '%(root)s/alias/default' % {'root': nvm_path}
nvm_node_root = '%(root)s/versions/node' % {'root': nvm_path}

# Grab default alias
with open(nvm_default_file_path, 'r') as content_file:
   content = content_file.read()

# Prepend 'v' to match folder names
version = content.strip()
if version[0] != 'v':
version = 'v' + version

# Take highest valid folder name
versions = os.listdir(nvm_node_root)
found = sorted([v for v in versions if v.startswith(version)])[-1]

if found == None:
  print("Failed to configure node: no valid version found for %(version)s" %{'version': version})
else:
  print("Configure node: %(version)s" % {'version': found})
  node_path = "%(root)s/%(version)s" % {'root': nvm_node_root, 'version': found }
  print("Node path: %(root)s" % {'root': node_path})
  path = "%(root)s/bin:%(root)s/lib:%(path)s" % {'root':node_path,'path':os.environ["PATH"]}
  os.environ["PATH"] = path

您应该对此进行修改:

this.setState({profe: YOUR_VALUE})