版權聲明：本文為博主原創文章，未經博主允許不得轉載。

代碼註釋比較詳細

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

import React, {Component} from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Platform,
    TouchableOpacity,
} from ‘react-native‘;

//獲取屏幕信息
var Dimensions = require(‘Dimensions‘);
var width = Dimensions.get(‘window‘).width;

class TextInputG extends Component {

    render() {
        return (
            <View style={styles.container}>

                {/*賬號輸入框在這裏用View包裹以便處理器樣式*/}
                <View style={styles.textInputViewStyle}>
                    <TextInput
                        style={styles.textInputStyle}
                        //站位符
                        placeholder=‘手機號‘/>
                </View>
                {/*密碼輸入框*/}
                <View style={styles.textInputViewStyle}>
                    <TextInput
                        style={styles.textInputStyle}
                        placeholder=‘密碼‘
                        //密文
                        secureTextEntry={true}/>
                </View>

                {/*設置控件可點擊*/}
                <TouchableOpacity onPress={()=>{alert(‘點擊登錄‘)}}>
                    {/*登錄按鈕*/}
                    <View style={styles.textLoginViewStyle}>
                        <Text style={styles.textLoginStyle}>登錄</Text>
                    </View>
                </TouchableOpacity>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        //設置占滿屏幕
        flex: 1,
        // backgroundColor: ‘black‘,
        marginTop: 140,

    },
    //包裹輸入框View樣式
    textInputViewStyle: {
        //設置寬度減去30將其居中左右便有15的距離
        width: width - 30,
        height: 45,
        //設置圓角程度
        borderRadius: 18,
        //設置邊框的顏色
        borderColor: ‘blue‘,
        //設置邊框的寬度
        borderWidth: 1,
        //內邊距
        paddingLeft: 10,
        paddingRight: 10,
        //外邊距
        marginTop: 10,
        marginLeft: 20,
        marginRight: 20,
        //設置相對父控件居中
        alignSelf: ‘center‘,


    },
    //輸入框樣式
    textInputStyle: {
        width: width - 30,
        height: 35,
        paddingLeft: 8,
        backgroundColor: ‘#00000000‘,
        // alignSelf: ‘center‘,
        //根據不同平臺進行適配
        marginTop: Platform.OS === ‘ios‘ ? 4 : 8,
    },

    //登錄按鈕View樣式
    textLoginViewStyle: {
        width: width - 30,
        height: 45,
        backgroundColor: ‘red‘,
        borderRadius: 20,
        marginTop: 30,
        alignSelf: ‘center‘,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
    },
    //登錄Text文本樣式
    textLoginStyle: {
        fontSize: 18,
        color: ‘white‘,


    },

});

module.exports = TextInputG;
 

React Native之登錄界面的布局