React-Native初体验四（window下实现登录界面）
2016-10-27 本文已影响40人
小码哥教育520it
这篇文章是居于reactNativeTest项目的，要是没有看过之前的文章请先看React-Native初体验一 |React-Native初体验二 | React-Native初体验三
1.界面效果
2.代码实现
1.新建一个Login.js文件
2.渲染界面
render() {
return (
<View style={{backgroundColor:'#f5f5f5',flex:1}}>
<View style={styles.title_bar}>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
style={styles.topbar_left_item}>
<Text >登录</Text>
</TouchableOpacity>
//占位置
<Text style={{flex:2}} ></Text>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
style={styles.topbar_left_item}>
<Text >注册</Text>
</TouchableOpacity>
</View>
//输入账号
<View style={styles.input_item}>
<Text style={{marginLeft:5}}> 账号：</Text>
<TextInput
style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
placeholder="手机号码/邮箱"
.....
/>
</View>
//输入密码
<View style={styles.input_item}>
<Text style={{marginLeft:5}}> 密码：</Text>
<TextInput
style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
placeholder="密码"
.....
/>
</View>
//忘记密码
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
style={{height:48,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
<Text style={{fontSize:13}}>忘记密码？</Text>
</TouchableOpacity>
//点击登录按钮
<View style={styles.btn_login}>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
>
<Text style={{color:'white',fontSize:18}}>登录</Text>
</TouchableOpacity>
</View>
//占位置
<View style={{flex:2}}></View>
//第三方登录
<View style={{marginBottom:20,alignItems:'center'}}>
<Text style={{fontSize:13,color:'#777'}}>第三方账号登录</Text>
............
</View>
</View>
</View>
);
}
3.修改index.android.js
/**这里是导包，导入我们要使用的控件*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';
/**导入一个自己写的js文件*/
import Login from './app/page/Login.js';
// 注册应用(registerComponent)后才能正确渲染
// 注意：只把应用作为一个整体注册一次，而不是每个组件/模块都注册
AppRegistry.registerComponent('reactNativeTest', () => Login);
Login.js文件的完整代码：
/**
* Created by Administrator on 2016/9/18 0018.
*/
'use strict';
import React, { Component } from 'react';
import{
View,
Text,
BackAndroid,
TouchableOpacity,
Image,
TextInput,
StyleSheet,
} from 'react-native';
import { NaviGoBack } from '../utils/CommonUtils';
var password='';
var username='';
class Login extends Component {
constructor(props) {
super(props);
/**
* 初始化方法
* @type {function(this:Login)}
*/
this.buttonBackAction=this.buttonBackAction.bind(this);//返回
}
/**
* 返回
*/
buttonBackAction(){
const {navigator} = this.props;
return NaviGoBack(navigator);
}
/**
* 其它的登录方法
* @param postion
* @returns {*}
*/
otherLogin(postion){
//weixin
if(postion==0){
//qq
}else if(postion==1){
//weibo
}else if(postion==2){
}
}
render() {
return (
<View style={{backgroundColor:'#f5f5f5',flex:1}}>
<View style={styles.title_bar}>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
style={styles.topbar_left_item}>
<Text >登录</Text>
</TouchableOpacity>
<Text style={{flex:2}} ></Text>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
style={styles.topbar_left_item}>
<Text >注册</Text>
</TouchableOpacity>
</View>
<View style={styles.input_item}>
<Text style={{marginLeft:5}}> 账号：</Text>
<TextInput
style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
placeholder="手机号码/邮箱"
placeholderTextColor="#aaaaaa"
underlineColorAndroid="transparent"
numberOfLines={1}
ref={'username'}
multiline={true}
onChangeText={(text) => {
username = text;
}}
/>
</View>
<View style={styles.input_item}>
<Text style={{marginLeft:5}}> 密码：</Text>
<TextInput
style={{fontSize: 15,flex:1,textAlign: 'left',textAlignVertical:'bottom'}}
placeholder="密码"
placeholderTextColor="#aaaaaa"
underlineColorAndroid="transparent"
numberOfLines={1}
ref={'password'}
multiline={true}
secureTextEntry={true}/**设计输入的文字不可见*/
onChangeText={(text) => {
password = text;
}}
/>
</View>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
style={{height:48,flexDirection:'row',justifyContent:'flex-end',alignItems:'center'}}>
<Text style={{fontSize:13}}>忘记密码？</Text>
</TouchableOpacity>
<View style={styles.btn_login}>
<TouchableOpacity onPress={() => {this.buttonBackAction()}}
>
<Text style={{color:'white',fontSize:18}}>登录</Text>
</TouchableOpacity>
</View>
<View style={{flex:2}}></View>
<View style={{marginBottom:20,alignItems:'center'}}>
<Text style={{fontSize:13,color:'#777'}}>第三方账号登录</Text>
<View style={{flexDirection:'row',marginTop:20}}>
<TouchableOpacity onPress={()=>{this.otherLogin(0)}}>
<Image source={require('../image/ic_login_weixin.png')} style={{width:50,height:50}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.otherLogin(1)}} style={{marginLeft:15}}>
<Image source={require('../image/ic_login_qq.png')} style={{width:50,height:50}}/>
</TouchableOpacity>
<TouchableOpacity onPress={()=>{this.otherLogin(2)}} style={{marginLeft:15}}>
<Image source={require('../image/ic_login_weibo.png')} style={{width:50,height:50}}/>
</TouchableOpacity>
</View>
</View>
</View>
);
}
}
const styles=StyleSheet.create({
input_item:{
backgroundColor:'white',
height:48,
flexDirection:'row',
alignItems:'center',
},
title_bar:{
height:48,
flexDirection:'row',
},
topbar_left_item:{
width:48,
height:48,
alignItems:'center',
justifyContent:'center'
},
btn_login:{
height:48,
backgroundColor:'#96E4DA',
flexDirection:'row',
alignItems:'center',
justifyContent:'center',
marginLeft:5,
marginRight:5,
}
});
export default Login;
来源：
http://bbs.520it.com/forum.php?mod=viewthread&tid=2274&extra=page%3D1
