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 = {
tit
4000
le: 'TextInput',
};

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

render() {
return (
<View>
<TextInput style={{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}/>

</View>

);
}
}

github下载地址