React Native—TextInput组件

大家好，我是贰妹子，希望我的博客对你有帮助（多动手练习一下呦）

一、前言

   文本输入框，相当于OC中的UITextField，在用法和属性方面，两者都有很大的借鉴之处：通过键盘将文本输入到应用程序的一个基本的组件；

二、TextInput的常见属性

   因为TextInput是继承自UIView，所以View的属性TextInput也能够使用，一些样式类的属性在学习的时候可以参照View的相关属性。

value 字符串型
文本输入的默认值

• keyboardType 键盘类型
  决定打开哪种键盘，例如，数字键盘。
  enum(‘default’, “ascii-capable”, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘phone-pad’, ‘name-phone-pad’, ‘email-address’, ‘decimal-pad’, ‘twitter’, ‘web-search’, “numeric”)
• multiline 布尔型
  如果值为真，文本输入可以输入多行。默认值为假。
• password 布尔型
  如果值为真，文本输入框就成为一个密码区域。默认值为假。
  -placeholder 字符串型
  在文本输入之前字符串将被呈现出来，通常被称为占位文字
• placeholderTextColor 字符串型
  占位符字符串的文本颜色
• returnKeyType enum(‘default’, ‘go’, ‘google’, ‘join’, ‘next’, ‘route’, ‘search’, ‘send’, ‘yahoo’, ‘done’, ‘emergency-call’)
  决定返回键的样式

话不多说，直接甩代码更直接, 简单的登录界面

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

export default class LogIn extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image style={styles.iconStyle}
                       source={{uri: 'http://img004.hc360.cn/m7/M04/F0/C5/wKhQpFc1NVCEbmlVAAAAABk-c9Q712.jpg'}}

                />
                {/*账号和密码*/}
                <TextInput style={styles.userInput}
                           placeholder={'请输入账号'}/>
                <TextInput style={styles.password}
                           password={true}
                           clearButtonMode={'always'}
                           placeholder={'请输入密码'}/>
                {/*登录Button*/}
                <View style={styles.commitStyle}>
                    <Text>登录</Text>
                </View>
                {/*设置*/}
                <View style={{flexDirection:'row',marginTop:20}}>
                    <Text style={styles.unLoginStyle}>无法登陆</Text>
                    <Text style={styles.newUserStyle}>新用户</Text>
                </View>
                {/*其他的登录方式*/}
                <View style={styles.bottomViewStyle}>
                    <Text style={{marginLeft: 5, color: '#000000', fontSize: 15, fontWeight: 'bild'}}>其他登录方式：</Text>
                    <Image style={styles.Avatar}
                           source={{uri: 'http://img004.hc360.cn/m7/M04/F0/C5/wKhQpFc1NVCEbmlVAAAAABk-c9Q712.jpg'}}/>
                    <Image style={styles.Avatar}
                           source={{uri: 'http://img004.hc360.cn/m7/M04/F0/C5/wKhQpFc1NVCEbmlVAAAAABk-c9Q712.jpg'}}/>
                    <Image style={styles.Avatar}
                           source={{uri: 'http://img004.hc360.cn/m7/M04/F0/C5/wKhQpFc1NVCEbmlVAAAAABk-c9Q712.jpg'}}/>
                </View>
                <TouchableOpacity onPress={()=>true}>

                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#134567',
        flex:1,
    },
    iconStyle: {
        width: 70,
        height: 70,
        marginTop: 60,
        alignSelf: 'center',
        borderRadius: 35,
    },

    userInput: {
        height: 35,
        marginTop: 20,
        backgroundColor: '#FFF'
    }, password: {
        height: 35,
        backgroundColor: '#fff'
    },
    commitStyle: {
        justifyContent:'center',
        alignItems:'center',
        borderRadius:15,
        backgroundColor:'#289',
        marginTop:100,
        marginLeft:0,
        marginRight:0
    }, unLoginStyle: {
        fontSize:20,
        color:'#000',
        marginLeft:10,
    }, newUserStyle: {
        fontSize:20,
        color:'#000000',
        marginRight:10,
        flex:1,
        flexDirection:'row',
        textAlign:'right'
    }, bottomViewStyle: {
        flexDirection:'row',
        alignItems:'center',
        marginBottom:20
    },
    Avatar: {
        width: 40,
        height: 40,
        alignSelf: 'center',
        borderRadius:20,
        borderColor:'#A99877',
        borderWidth:1,
        marginLeft:8,
    },
});

module.exports = LogIn;