React Native - TextInput详细解说

1，TextInput组件介绍

TextInput 组件除了作为输入框实现基本的输入功能外，它还提供了许多其他功能，比如自动校验、占位符以及指定弹出不同的键盘类型等。

2，组件的属性

（1）autoCapitalize：首字母自动大写。可选值有：none、sentences、words、characters。

（2）placeholder：占位符，在输入前显示的文本内容。

（3）value：文本输入框的默认值。

（4）placeholderTextColor：占位符文本的颜色。

（5）password：如果为 true，表示密码输入框。文本显示为“*”

（6）multiline：如果为 true，表示多行输入。

（7）editable：默认为 true。如果设置为 false 表示不可编辑。

（8）autoFocus：如果为 true，则自动获取焦点。

（9）clearButtonMode：表示什么时候会显示清除按钮。可选值有：never、while-editing、unless-editing、always。

（10）maxLength：能够输入的最长字符数。

（11）enablesReturnKeyAutomatically：默认为 false。设置为 true 表示没有输入文本时返回键无法使用。

（12）returnKeyType：表示软键盘返回键显示的字符串。可选值为：default、go、google、join、next、route、search、send、yahoo、done、emergency-call。

（13）secureTextEntry：默认为 false。如果为 true，则像密码框一样隐藏输入内容。

3，组件的方法

（1）onChange：当文本发生变化时，调用该函数。

（2）onEndEditing：当结束编辑时，调用该函数。

（3）onBlur：失去焦点时触发。

（4）onFocus：获得焦点时触发。

（5）onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件。

4，使用样例

（1）效果图

页面上添加一个 TextInput 用于输入文字，并设置相关的占位符文字以及样式。
当输入框文字改变时，下方 Text 组件会实时统计并显示输入的文字长度。
点击输入框右侧“搜索”按钮，则将输入框内容弹出显示。

（2）样例代码

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
} from 'react-native';
 
//输入框组件
class Search extends Component {
  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }
 
  //组件渲染
  render() {
    return (
      <View style={styles.flex}>
          <View style={[styles.flexDirection, styles.inputHeight]}>
            <View style={styles.flex}>
              <TextInput
                style={styles.input}
                returnKeyType="search"
                placeholder="请输入关键字"
                onChangeText={(text) => this.setState({text})}/>
            </View>
            <View style={styles.btn}>
              <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
            </View>
          </View>
          <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>
      </View>
    );
  }
 
  //搜索按钮点击
  search(){
    alert("您输入的内容为："+this.state.text);
  }
}
 
//默认应用的容器组件
class App extends Component {
   render() {
      return (
        <View style={[styles.flex, styles.topStatus]}>
         <Search></Search>
        </View>
      );
   }
 }
 
//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  flexDirection:{
    flexDirection:'row'
  },
  topStatus:{
    marginTop:25,
  },
  inputHeight:{
    height:45,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn:{
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems: 'center'
  },
  search:{
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  tip:{
    marginLeft: 5,
    marginTop: 5,
    color: '#C0C0C0',
  }
});
 
AppRegistry.registerComponent('HelloWorld', () => App);

原文出自：www.hangge.com 转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1526.html

来源：https://www.cnblogs.com/gdsblog/p/7088064.html

标签

react

输入框