react native TextInput 使用详解

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。

在Android和ios上有一些却别：
1、在安卓上默认有一个底边框，同时会有一些padding：可以在style中设置padding: 0去掉padding，设置underlineColorAndroid=”transparent”去掉底边框。
2、multiline = {true}，Android上文本默认会垂直居中，设置textAlignVertical: top样式来使其居顶显示

属性：

autoCapitalize：是否要自动将特定字符切换为大写

• characters: 所有的字符。
• words: 每个单词的第一个字符。
• sentences: 每句话的第一个字符（默认）。
• none: 不自动切换任何字符为大写。

autoFocus：自动获得焦点。
caretHidden：是否隐藏光标。默认值为false。
editable：是否可编辑。
keyboardType：只有下面3个是通用的，其他值可以查看官方文档

• default：默认
• numeric：数字键盘
• email-address：邮箱

maxLength：限制文本框中最多的字符数。
multiline：文本框中可以输入多行文字。默认值为false。
onBlur：当文本框失去焦点的时候调用此回调函数。
onEndEditing：当文本输入结束后调用此回调函数。
onFocus：当文本框获得焦点的时候调用此回调函数。
placeholder：提示字符，没有任何文字输入，会显示此字符串。
placeholderTextColor：提示字符颜色。
returnKeyType(ios)、returnKeyLabel(android)：“确定”按钮显示的内容

• 通用:done、go、next、search、send
• Android ：none、previous
• iOS：default、emergency-call、google、join、route、yahoo

secureTextEntry：相当于密码框
selectTextOnFocus：如果为true，当获得焦点的时候，所有的文字都会被选中
selection：获取焦点时选中字符，selection={{start:0,end:3}}
selectionColor：选中字符的颜色

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    TextInput,
    Button,
} from 'react-native';

export default class TextInputDemo extends Component {
    static navigationOptions = {
        title: 'TextInput',
    };

    constructor(props) {
        super(props);
        this.state = {text: '123456'};
    }

    render() {
        return (
            
                height:44}}
                           keyboardType='email-address'
                           //onFocus={()=>{this.setState({text: 'onFocus'});}}
                           //onBlur={()=>{this.setState({text: 'onBlur'});}}
                           onChangeText={(txt)=>{this.setState({text: txt});}}
                           onEndEditing={()=>{this.setState({text: 'onEndEditing'});}}
                           //selectTextOnFocus={true}
                           selection={{start:0,end:3}}
                           selectionColor='red'
                           value={this.state.text}/>

            

        );
    }
}

github下载地址