React-Native通过登录界面学习TextInput组件

同时适配Android和IOS

代码注释比较详细

/** * 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,backgroundColor: 'red',borderRadius: 20,marginTop: 30,alignSelf: 'center',justifyContent: 'center',alignItems: 'center',//登录Text文本样式
    textLoginStyle: {
        fontSize: 18,color: 'white',});

module.exports = TextInputG;