React-Native 获取node.js提供的接口

一个简单的React-Native 获取node.js提供的接口的实现

一、node.js

 1 var http = require("http");
 2 var url = require("url");
 3 var querystring = require("querystring");
 4 
 5 var json1 = '{"state":"1"}';
 6 var json2 = '{"state":"0"}';
 7 http.createServer(function(request, response) {
 8   response.writeHead(200, {"Content-Type": "text/json"});
 9     var pathname = url.parse(request.url).pathname;      
10   var query = url.parse(request.url).query;
11   var userName = querystring.parse(query)["userName"];
12   var passWord = querystring.parse(query)["passWord"];
13   if(userName==='weifengzz' && passWord==='123'){
14       response.write(json1);
15   }else{
16       response.write(json2);
17   }
18   response.end();
19 }).listen(1314);

二、react－native

'use strict';

var React = require('react-native');
var FileUpload = require('NativeModules').FileUpload;

var {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
  Animated,
  Image,
  ToastAndroid,
} = React;

var t = require('tcomb-form-native');
var {
  AppRegistry, 
  StyleSheet,
  Text, 
  View, 
  TouchableHighlight 
} = React;



var REQUEST_URL = 'http://192.168.6.5:1314/GetJson';

var Form = t.form.Form;
var Person = t.struct({
  userName: t.String,              
  password: t.String,  
});

var options = {
  fields: {
    password: {
      placeholder: '密码',
      label: '密码',
      password: true,
    },
    userName: {
      placeholder: '用户名',
      label: '用户名',
    }
  }
};

var verification = React.createClass({
  getInitialState: function() {
    return {
      value: {
        userName: null,
        password: null,
        result: null,
      } 
    };
  },
  onPress: function () {
    var value = this.refs.form.getValue();
    if (value) { 
      
    }
  },

  render: function() {
    return (
      <View style={styles.container}>
        <Form
          ref="form"
          type={Person}
          value={this.state.value}
          options={options} />
        <TouchableHighlight #99d9f4'>
          <Text style={styles.buttonText}>登录</Text>
        </TouchableHighlight>
        <TouchableHighlight #99d9f4'>
          <Text style={styles.buttonText}>上传文件</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress ={ () => ToastAndroid.show('请选择图片', ToastAndroid.SHORT) } 
          #99d9f4'  >
          <Text style={styles.buttonText}>提醒</Text>
        </TouchableHighlight>
      </View>
    );
  },
  componentDidMount: function() {
      this.fetchData('weifengzz','123');
  },
  fetchData: function(un,pw) {
    fetch(REQUEST_URL, {
    method: 'POST',
    headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      userName: un,
      password: pw,
    })
  })
    .then((response) => response.json())
    .then((responseData) => {
        this.setState({
          result: responseData,
        });
    })
    .done();
  },
  responseData: function(response){
    return response.result.data;
  }
});

var styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    marginTop: 50,
    padding: 20,
    backgroundColor: '#ffffff',
  },
  title: {
    fontSize: 30,
    alignSelf: 'center',
    marginBottom: 30
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  }
});

AppRegistry.registerComponent('verification', () => verification);