React Native组件之TextInput

Posted 2020-09-22 douglasvegas

一、简介

一个用于文本输入的基本组件。内置了多种特性，比如自动完成，自动大小写，以及多种不同的键盘类型。

二、TextInput

从TextInput里取值使用onChangeText事件这就是目前唯一的做法。

 

import React, { Component } from ‘react‘;
import { AppRegistry, TextInput } from ‘react-native‘;

class UselessTextInput extends Component {
  constructor(props) {
    super(props);
    this.state = { text: ‘Useless Placeholder‘ };
  }

  render() {
    return (
      <TextInput
        style={{height: 40, borderColor: ‘gray‘, borderWidth: 1}}
        onChangeText={(text) => this.setState({text})}
        value={this.state.text}
      />
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent(‘AwesomeProject‘, () => UselessTextInput);

 

注意有些属性仅在multiline为true或者为false的时候有效。此外，当multiline=false时，为元素的某一个边添加边框样式（例如：borderBottomColor，borderLeftWidth等）将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput：

import React, { Component } from ‘react‘;
import { AppRegistry, View, TextInput } from ‘react-native‘;

class UselessTextInput extends Component {
  render() {
    return (
      <TextInput
        {...this.props} // 将父组件传递来的所有props传递给TextInput;比如下面的multiline和numberOfLines
        editable = {true}
        maxLength = {40}
      />
    );
  }
}

class UselessTextInputMultiline extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: ‘Useless Multiline Placeholder‘,
    };
  }

  // 你可以试着输入一种颜色，比如red，那么这个red就会作用到View的背景色样式上
  render() {
    return (
     <View style={{
       backgroundColor: this.state.text,
       borderBottomColor: ‘#000000‘,
       borderBottomWidth: 1 }}
     >
       <UselessTextInput
         multiline = {true}
         numberOfLines = {4}
         onChangeText={(text) => this.setState({text})}
         value={this.state.text}
       />
     </View>
    );
  }
}

// App registration and rendering
AppRegistry.registerComponent(
 ‘AwesomeProject‘,
 () => UselessTextInputMultiline
);

 

三、TextInput的API

1.  autoCapitalize    enmu(‘none‘,‘sentences‘,‘words‘,‘characters‘)   控制TextInput是否自动将特定的字符切换为大写。  

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

1. autoCorrect   Boolean　　是否关闭拼写自动修正
2. autoFocus      Boolean      在componentDidMount后是否自动聚焦
3. blurOnSubmit   Boolean    true =>文本框在提交时失焦。 单行输入框默认true，多行false。（多行设为true，按下回车键失焦+触发onSubmitEditing）
4. caretHidden    Boolean     是否隐藏光标 默认值false
5. defaultValue  String        文本初始值
6. editable       Boolean      是否不可编辑   默认值true
7. keyboardType   Enum("default","numeric","email-address","ascii-capabale","numbers-and-punctuation","url","number-pad","phone-pad","name-phone-pad","decimal-pad","twitter","web-search") 其中 default  numeric  email-address所有平台通用。
8. maxLength   Number  最大输入长度
9. multiline    Boolean    是否可以输入多行文字 默认false
10. onBlur  Function   文本库失焦回调函数
11. onChange  Function  文本框内容发生变化回调函数
12. onChangeText   Function  文本框内容发生变化回调函数.改变后的内容作为参数传递
13. onFocus  Function  聚焦的时候调用
14. onLayout Function   组件挂载或者布局变化时调用参数为{x,y, width, height}
15. onScroll   Function   内容滚动时持续调用，传回参数{ nativeEvent:{ contentOffset:{x,y}}} 安卓上出于性能考虑不会提供contentSize参数
16. onSelectChange   Function  长按选择文本时，选择范围变化时调用。 { nativeEvent: {selection: { start, end}}}
17. onSubmitEditing   Function  软键盘确定／提交按钮按下时候回调。如果multiline={true}，此属性不可用
18. placeholder  String  占位
19. placeholderTextColor  占位符显示的文字颜色
20. secureTextEntry  Boolean   是否遮挡之前的输入文字（密码） 默认false
21. selectTextOnFocus  Boolean  是否在聚焦时全选
22. selection {start: number, end: number} 
23. selectionColor 设置输入框高亮时颜色
24. style 
25. value 文本框中的文字内容

四、方法

isFocused(): Boolean  返回值表明当前输入框是否聚焦

clear()  清空输入框的内容