React Native组件之TextInput

Posted douglasvegas

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React Native组件之TextInput相关的知识,希望对你有一定的参考价值。

一、简介

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

二、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时,为元素的某一个边添加边框样式(例如:borderBottomColorborderLeftWidth等)将不会生效。为了能够实现效果你可以使用一个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()  清空输入框的内容

 

以上是关于React Native组件之TextInput的主要内容,如果未能解决你的问题,请参考以下文章

React Native 之 TextInput(多个语法知识)

REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

REACT NATIVE 系列教程之十三利用LISTVIEW与TEXTINPUT制作聊天/对话框&&获取组件实例常用的两种方式

React-Native:使用自定义 TextInput 组件添加文本限制指示器

如何计算 React Native 中 TextInput 组件中文本的宽度?

在 React Native 中从子组件 TextInput 更新父组件状态