React Native的学习之小练习-登陆页

在项目中，有ios和Android的区别，不一样的设备显示的内容也会有些差别，因此，布局时有时要改不一样的样式才能显示同样的效果，因此能够把两个文件都映射到一个文件中只修改一个文件就能够达到这样的效果。先新建一个login.js.内容以下：react

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput
} from 'react-native';

class Login extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Image style={styles.Icon} source={require('./imgs/hb.jpg')}/>
        <TextInput 
        style={styles.userStyle}
        placeholder='请输入用户名'
        clearButtonMode='always' //never 永远不显示删除 always 一直显示  
        clearTextOnFocus={true}  //获取焦点时是否清空文字 、
        enablesReturnKeyAutomatically={false}  //是否自动启用回车键，有内容就显示，没有就不启用
        returnKeyType = 'go'  //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索 
        onChangeText={()=>{console.warn('用户名是...')}} //文字修改完从新给state的query赋值
        />
        <TextInput 
        style={styles.userStyle}
        placeholder='请输入密码'
        clearButtonMode='always' //never 永远不显示删除 always 一直显示  
        clearTextOnFocus={true}  //获取焦点时是否清空文字 
        password={true}
        enablesReturnKeyAutomatically={false}  //是否自动启用回车键，有内容就显示，没有就不启用
        returnKeyType = 'go'  //回车键上的文字: go前往 join加入 next 下一项 route路线 send 发送 search 搜索 
        onChangeText={()=>{console.warn('用户名是...')}} //文字修改完从新给state的query赋值
        />
        <View style={styles.loginStyle}>
          <Text style={styles.instructions}>
              登陆
          </Text>
        </View>
        <View style={styles.more}>
           <Text style={styles.welcome}>
           忘记密码
          </Text>
          <Text style={styles.instructions}>
            注册
          </Text>
        </View>
        <View style={styles.otherLoginStyle}>
          <Text style={styles.instructions}>
            其余登陆方式：
          </Text>
           <Image style={styles.icons} source={require('./imgs/hb.jpg')}/> 
           <Image style={styles.icons} source={require('./imgs/hb.jpg')}/> 
           <Image style={styles.icons} source={require('./imgs/hb.jpg')}/> 
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container:{
    flex: 1,
    alignItems:'center',
    backgroundColor:'#F5FCFF'
  },
  Icon:{
    width:200,
    height:200,
    borderRadius:100,
    marginTop:20,
    marginBottom:20,
  },
  userStyle:{
    width:300,
    height:50,
    textAlign:'center',
    // borderWidth:1,
    backgroundColor:'#ededed',
    marginBottom:10,

  },
  loginStyle:{
    width:200,
    marginBottom:10,
    alignItems:'center',
    backgroundColor:'pink',
  },
  more:{
    flexDirection:'row',
    width:200,
    justifyContent:'space-between',
  },
  otherLoginStyle:{
    flexDirection:'row',
    alignItems:'center',
    position:'absolute',
    left:10,
    bottom:20,
  },
  icons:{
    width:50,
    height:50,
    borderRadius:25,
    marginLeft:5,
  },
});

module.exports = Login

写完这个页面了，要在index.android.js和index.ios.js中引入这个组件，才能映射到这一个文件中，在这两个文件中能够直接这么写：android

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';
import Login from './login.js';
export default class Project extends Component {
  render() {
    return (
      <Login />
    );
  }
}

AppRegistry.registerComponent('Project', () => Project);

就能够一进来就到登陆页了，贴张图：
ios

可能样式有些不太好看，就先这样看着吧，TextInput组件在Android上有个线，想去掉的话，加上那个属性就能够，个人博客里有一个写TextInput的，想了解的小伙伴能够戳TextInput。
简单的登陆页出来了。
有什么宝贵意见建议，能够在下方留言哦！十分感谢！git

本文同步分享在博客“zoepriselife316”（CSDN）。
若有侵权，请联系 support@oschina.cn 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一块儿分享。github