一个简单的React-Native 获取node.js提供的接口的实现
一、node.js
var http = require("http");
var url = require("url");
var querystring = require("querystring");
var json1 = '{"state":"1"}';
var json2 = '{"state":"0"}';
http.createServer(function(request, response) {
response.writeHead(200, {"Content-Type": "text/json"});
var pathname = url.parse(request.url).pathname;
var query = url.parse(request.url).query;
var userName = querystring.parse(query)["userName"];
var passWord = querystring.parse(query)["passWord"];
if(userName==='weifengzz' && passWord==='123'){
response.write(json1);
}else{
response.write(json2);
}
response.end();
}).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 style={styles.button} onPress={this.onPress} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>登录</Text>
</TouchableHighlight>
<TouchableHighlight style={styles.button} onPress={this.onPressToUp} underlayColor='#99d9f4'>
<Text style={styles.buttonText}>上传文件</Text>
</TouchableHighlight>
<TouchableHighlight onPress ={ () => ToastAndroid.show('请选择图片', ToastAndroid.SHORT) }
style={styles.button} underlayColor='#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);