ReactNative学习九－登录页面

1.效果图

2.代码

/**
 * 登录页面
 */

//初始化类
import React,{
    AppRegistry,Component,StyleSheet,Text,Image,View,TextInput
} from 'react-native';

//初始化类
export default class MyProject extends Component {
  render() {
    return (
          <View style={styles.container}>
                   
            <View style={styles.header}>
               <Text style = {styles.headtitle}>
                  登 录
               </Text>
            </View>

            <View style={styles.avatarview}>
                <Image style = {styles.avatarimage} source = {require('./icon_baidu.png')}>
                </Image>
            </View>

            <View style={styles.inputview}>
                <TextInput style = {styles.textinput} placeholder='QQ号/手机号/邮箱' underlinecolorandroid='transparent'/>
                <View style={styles.dividerview}><Text style={styles.divider}></Text></View>
                <TextInput style = {styles.textinput} placeholder='密码' secureTextEntry ={true} underlinecolorandroid='transparent'/>
            </View>
                          
            <View style={styles.buttomview}> 
              <View style={styles.buttonview}>  
                <Text style={styles.logintext}>登 录</Text>
              </View>

              <View style={styles.emptyview}></View>

              <View style={styles.bottombtnsview}>
                        <View style={styles.bottomleftbtnview}>
                            <Text style={styles.bottombtn}>无法登录？</Text>
                        </View>
                        <View style={styles.bottomrightbtnview}>
                            <Text style={styles.bottombtn}>新用户</Text>
                        </View>
              </View>
            </View>
          
          </View>     
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,//可拉伸
    backgroundColor: '#F5FCFF',},header: {//头部高度
    height: 50,justifyContent:'center',//水平方向
  },headtitle: {//头部标题
    alignSelf:'center',fontSize: 18,color:'#000000',avatarview: {//登录图标区域
        height: 150,backgroundColor: '#ECEDF1',justifyContent: 'center',avatarimage: {//登录图标
        width: 100,height: 100,alignSelf: 'center'
    },inputview: {//用户名/密码区域
        height: 100,textinput: {//用户名/密码输入框
        flex: 1,borderWidth: 0,fontSize: 16,dividerview: {//分割线区域
        flexDirection: 'row',divider: {
        flex: 1,height: 1,backgroundColor: '#ECEDF1'
    },buttomview: {
        backgroundColor: '#ECEDF1',flex: 1,buttonview: {
        flexDirection: 'row',backgroundColor: '#1DBAF1',margin: 10,borderRadius: 6,alignItems: 'center',logintext: {
        alignSelf:'center',fontSize: 17,color: '#FFFFFF',marginTop: 10,marginBottom: 10,emptyview: {
        flex: 1,bottombtnsview: {
        flexDirection: 'row',bottomleftbtnview: {
        flex: 1,height: 50,paddingLeft: 10,alignItems: 'flex-start',bottomrightbtnview: {
        flex: 1,paddingRight: 10,alignItems: 'flex-end',bottombtn: {
        fontSize: 15,color: '#1DBAF1',});

// AppRegistry.registerComponent('MyProject',() => MyProject);

3.注意

1、组件在React Native中，默认是带一条横线的，也就是material design风格的输入框，如果想去掉输入框下面的横线，需要给指定一个underlineColorAndroid属性，属性值为'transparent'，这样就可以去掉输入框下面的横线了；

2、密码输入框需要指定属性：secureTextEntry={true}，指定该属性后输入的文本才会被黑点替代；

3、要显示图片，必须为<Image>标签指定宽度和高度，和Android中不同的是，<Image>没法自动调整图片的大小，没有类似Android中的wrap_content。

转载出处:http://www.2cto.com/kf/201601/487774.html