zoukankan      html  css  js  c++  java
  • 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()  清空输入框的内容

  • 相关阅读:
    题解 CF171G 【Mysterious numbers
    题解 P1157 【组合的输出】
    题解 P3955 【图书管理员】
    题解 P2036 【Perket】
    题解 CF837A 【Text Volume】
    题解 CF791A 【Bear and Big Brother】
    题解 CF747A 【Display Size】
    题解 P1332 【血色先锋队】
    题解 P2660 【zzc 种田】
    题解 P4470 【[BJWC2018]售票】
  • 原文地址:https://www.cnblogs.com/douglasvegas/p/6963383.html
Copyright © 2011-2022 走看看