一个简单的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);

React-Native 获取node.js提供的接口的更多相关文章

  1. [RN] React Native 获取地理位置

    React Native 获取地理位置 实现原理: 1.用  navigator.geolocation.getCurrentPosition 获取到坐标信息 2.调用 高德地图 接口,解析位置数据 ...

  2. [RN] React Native 获取验证码 按钮

    React Native 获取验证码 按钮 效果如图: 实现方法: 一.获取验证码 按钮组件 封装 CountDownButton.js "use strict"; import ...

  3. Node.js提供了哪些内容(API)

    Nodejs运行时,JavaScript代码运行时的环境. 提供了一些核心模块,应用程序编程接口(Application Program Interface,API)  API 的意思就是.一个已经解 ...

  4. React Native 系列(一) -- JS入门知识

    前言 本系列是基于React Native版本号0.44.3写的,最初学习React Native的时候,完全没有接触过React和JS,本文的目的是为了给那些JS和React小白提供一个快速入门,让 ...

  5. [React Native]获取网络状态

    使用React Native,可以使用NetInfo API获取手机当前的各个网络状态. componentWillMount() { NetInfo.fetch().done((status)=&g ...

  6. node.js:《接口实现文件的上传和下载》

    使用node.js写上传文件和下载文件的接口 上传接口: 开始写接口前,我们先安装一个上传文件的插件:npm install multer 安装成功在package.json或package-lock ...

  7. React Native 获取网络数据

    getMoviesFromApiAsync() { return fetch('http://facebook.github.io/react-native/movies.json') .then(( ...

  8. React Native 获取组件(Component)在屏幕上的位置

    年后主客户端的需求以及老的业务迁移RN,现在疯狂的在学RN.在迁移需求的时候遇到需要获取组件在屏幕上的绝对位置.页面如下: 就需要展开的时候获取sectionHeader(默认排序)在屏幕上的具体位置 ...

  9. react native 获取 软键盘高度 和 新增软键盘的组件

    import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Keyboard, Te ...

随机推荐

  1. BFC,IFC,GFC,FFC的定义及功能

    What's FC?一定不是KFC,FC的全称是:Formatting Contexts,是W3C CSS2.1规范中的一个概念.它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定 ...

  2. html进阶css(1)

    <!doctype html> <html> <head> <meta http-equiv="content-type" content ...

  3. c3p0xml配置详解

    <?xml version="1.0" encoding="UTF-8"?> <c3p0-config> <default-con ...

  4. @synthesize

    @synthesize 相当于把属性当成成员变量来用,不用再写self.属性@synthesize myButton; 这样写了之后,那么编译器会自动生成myButton的实例变量,以及相应的gett ...

  5. [转]Python存取XML方法简介

    转自:http://www.cnblogs.com/salomon/archive/2012/05/28/2518648.html 目前而言,Python 3.2存取XML有以下四种方法: 1.Exp ...

  6. [C++程序设计]有默认参数的函数

    实参与形参的结合是从左至右顺序进行的.因此指定默认值的参数必须放在形参表列中的最右端,否 则出错.例如: void f1(float a,int b=0,int c,char d=′a′); //不正 ...

  7. pubwin会员合并

    此博文已移至爬不稳独立博客:www.pubwin2009.net连接:http://www.pubwin2009.net/index.php/post/15.html 我们说下过程(这里,我们要求两个 ...

  8. Git学习05 --分支管理02

    1.冲突 产生冲突后,查看readme.txt   可以看到冲突内容 <<<<<<< ======= >>>>>>> ...

  9. CSS3之背景色渐变

    在css2时代,页面背景色渐变,按钮背景渐变效果主要是通过图片实现,css3中可通过 gradient 实现背景色渐变,图片作为一种资源,每次在页面加载时都要从服务器下载,这样如果页面很大需要渐变的效 ...

  10. 九、 合成(Composite)模式 --结构模式(Structural Pattern)

    合成模式:有时又叫做部分-整体模式(Part-Whole).合成模式将对象组织到树结构中,可以用来描述整体与部分的关系.合成模式可以使客户端将单纯元素与复合元素同等看待. 合成模式分为安全式和透明式 ...