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