RN TextInput 常见属性

关于TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

最简单的用法就是丢一个TextInput到应用里，然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件，譬如onSubmitEditing和onFocus。

TextInput常见的属性

属性方法
这里汇聚平台公用以及Android生效的属性方法

1.View 支持View的相关属性

2.autoCapitalize 控制TextInput输入的字符进行切换成大写(可选择参数:'none', 'sentences', 'words', 'characters')

none:不自动切换任何字符成大写
sentences:默认每个句子的首字母变成大写
words:每个单词的首字母变成大写
characters:每个字母全部变成大写

3.autoCorrect bool 设置拼写自动修正功能 默认为开启(true)

4.autoFocus bool 设置是否默认获取到焦点默认为关闭(false)。该需要componentDidMount方法被调用之后才会获取焦点哦(componentDidMount是React组件被渲染之后React主动回调的方法)

5.defaultValue string 给文本输入设置一个默认初始值。

6.editable bool 设置文本框是否可以编辑 默认值为true,可以进行编辑

7.keyboardType 键盘类型(可选参数:"default", 'email-address', 'numeric', 'phone-pad', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 该用来选择默认弹出键盘的类型例如我们甚至numeric就是弹出数字键盘。鉴于平台的原因如下的值是所有平台都可以进行通用的

default
numeric 数字键盘
email-address 邮箱地址

8.maxLength number 可以限制文本输入框最大的输入字符长度

9.multiline bool 设置可以输入多行文字，默认为false(表示无论文本输入多少，都是单行显示)

10.onBlur function 监听方法，文本框失去焦点回调方法

11.onChange function 监听方法,文本框内容发生改变回调方法

12.onChangeText function监听方法，文本框内容发生改变回调方法，该方法会进行传递文本内容

13.onEndEditing function监听方法，当文本结束文本输入回调方法

14.onFocus function 监听方法 文本框获取到焦点回调方法

15.onLayout function监听方法 组价布局发生变化的时候调用，调用方法参数为 {x,y,width,height}

16.onSubmitEditing function监听方法，当编辑提交的时候回调方法。不过如果multiline={true}的时候，该属性就不生效

17.placeholder string 当文本输入框还没有任何输入的时候，默认显示信息，当有输入的时候该值会被清除

18.placeholderText Color string 设置默认信息颜色(placeholder)

19.secureTextEntry bool 设置是否为密码安全输入框 ，默认为false

20.selectTextOnFocus bool 如果为true，当获得焦点的时候，所有的文字都会被选中。

21.selectionColor string 设置输入框高亮时的颜色（在iOS上还包括光标）

22.style 风格属性 可以参考Text组件风格

23.value string 输入框中的内容值

=============以上是一些Android，iOS平台通用的属性，下面根据官网的文档，适用于AndroidIOS平台的属性方法=================

Android

24.numberOfLines number设置文本输入框行数，该需要首先设置multiline为true,设置TextInput为多行文本。

25.textAlign 设置文本横向布局方式 可选参数('start', 'center', 'end')

26.textAlignVertical 设置文本垂直方向布局方式 可选参数('top', 'center', 'bottom')

27.underlineColorAndroid 设置文本输入框下划线的颜色

ios

28.clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') 是否要在文本框右侧显示“清除”按钮。

29.clearTextOnFocus bool 如果为true，每次开始输入的时候都会清除文本框的内容。

30.enablesReturnKeyAutomatically bool 如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。

31.keyboardAppearance enum('default', 'light', 'dark') 指定键盘的颜色。

32.onKeyPress function 当一个键被按下的时候调用此回调。被按下的键会作为参数传递给回调函数。会在onChange之前调用。

33.returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')决定“确定”按钮显示的内容。

34.selectionState DocumentSelectionState 参见DocumentSelectionState.js，可以控制一个文档中哪段文字被选中的状态。

示例 :

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput
} from 'react-native';
export default class TextInputDemo extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TextInput
            style={styles.inputStyle}
            // value={'我是默认文字'}
            keyboardType={'number-pad'}
            // 多行显示
            // multiline={true}
            // password={true}
            placeholder={'我是占位文字'}
            clearButtonMode={'always'}
        />
      </View>
    );
  }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F5FCFF',
    },

    inputStyle:{
        marginTop:30,
        width:300,
        height:60,
        // 背景
        // backgroundColor:'black',
        // 边框
        borderWidth:1,
        borderColor:'#e8e8e8'
    }
});

AppRegistry.registerComponent('TextInputDemo', () => TextInputDemo);