1

基本上我要做的是，单击登录按钮时，它应该获取我的输入数据并检查数据是否对身份验证有效，并将响应发送回用户并显示在 UI 上。身份验证后，它应该被重定向到主屏幕。我尝试使用 fetch 但它不起作用。下面是代码：

import React, { Component } from 'react';
import {
  AppRegistry,
  Text,
  Image,
  View,
  StyleSheet,
  TextInput,
  Linking,
  Alert,
  Navigator
} from 'react-native';
import { Button } from 'react-native-elements';
import t from 'tcomb-form-native';

const Form = t.form.Form;

// here we are: define your domain model
const Email = t.subtype(t.Str, (email) => {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return reg.test(email);
});

const LoginFields = t.struct({
  username: Email,  // a required string
  password: t.String, // a required string
});

const options = {
  fields: {
    password: {
      type: 'password',
      placeholder: 'Password',
      error: 'Password cannot be empty'
    },
    username: {
      placeholder: 'e.g: abc@gmail.com',
      error: 'Insert a valid email'
    }
  }
}; // optional rendering options (see documentation)

export class ChildComponent extends Component {
  render() {
    if(this.props.result) {
      var res = this.props.result.map((item, i) => {
        return(
          <Text key={i}>{item.useremail}</Text>
        )
      })
    }
    return (
      <View>
        {res}
      </View>
    )
  }
}

export default class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      buttonState: true,
      value: {}
    }
  }


  _onSubmit() {
    const value = this.refs.form.getValue();
     if (value) { // if validation fails, value will be null
       console.log(value);
        // value here is an instance of LoginFields
     }
     componentDidMount() {
       fetch('http://192.168.100.160:6016/admin/login', {
     method: 'POST',
     headers: {
       'Accept': 'application/x-www-form-urlencoded',
       'Content-Type': 'application/x-www-form-urlencoded',
     },
     body: JSON.stringify({
       useremail: 'kirti@pws.com',
       userpassword: '1234',
     })
   })
   .then((response) => response.json())
   .then((responseJson) => {
     this.setState ({
       data: responseJson.admin/login
     })
   })
     }

     this.props.navigator.push({
       id: 'Home'
     });
  }

  onChange = () => {
    const value = this.refs.form.getValue();
    if(value) {
      this.setState({
        value,
        buttonState: false
      });
    }
  }
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.header}>
        </View>
        <View style={styles.content}>
          <Text style={styles.contentHeader}>
            Pateast Login
          </Text>
          <View style={styles.loginFormContent}>
            <Form
              ref="form"
              type={LoginFields}
              options={options}
              value={this.state.value}
              onChange={this.onChange}
            />
              <Text style={{color: 'blue', marginBottom: 10}}
                onPress={() => Linking.openURL('https://www.google.co.in')}>
                Forgot Password?
              </Text>
              <Button
                  raise
                  icon={{name: 'key', type: 'octicon'}}
                  onPress={this._onSubmit.bind(this)}
                  title="Login"
                  disabled={this.state.buttonState}
                  accessibilityLabel="Ok, Great!"
                />
            </View>
        </View>
        <View style={styles.footer}>
        </View>
        <ChildComponent status={this.state.status} result={this.state.data} />
      </View>
    );
  }
}

const styles = StyleSheet.create(
  {
    container: {
      flex: 1
    },
    contentHeader: {
      // fontFamily: 'sans-serif-condensed',
      fontWeight: 'bold',
      fontSize: 40,
      alignSelf: 'center',
      marginBottom: 30
    },
    header : {
      flex: 0.5,
      backgroundColor: '#008080'
    },
    content: {
      flex: 10,
      backgroundColor: '#f8f8ff',
      justifyContent: 'center'
    },
    loginFormContent: {
      marginHorizontal: 20
    },
    footer: {
      flex: 0.5,
      backgroundColor: '#008080'
    },
    loginText: {
      fontSize: 20,
      marginBottom: 10
    },
    inputFields: {
      fontSize: 20,
      borderStyle: 'solid',
      borderColor: '#000000',
      borderRadius: 30,
      marginBottom: 10
    }
  }
);
4

1 回答 1

1

你离你的目标只有一步之遥。您唯一需要更改的是您body在发布请求中的对象。该对象必须是FormData https://developer.mozilla.org/de/docs/Web/API/FormData

尝试像这样设置身体：

let data = new FormData();
data.append("useremail", 'kirti@pws.com');
data.append("userpassword", '1234');

之后，您的 fetch 请求应如下所示：

fetch('http://192.168.100.160:6016/admin/login', {
     method: 'POST',
     headers: {
       'Accept': 'application/x-www-form-urlencoded',
       'Content-Type': 'application/x-www-form-urlencoded',
     },
    body: data
}
...
于 2017-03-31T07:54:01.913 回答