這篇文章是居于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
