GVKun编程网logo

React-Native填坑之TextInput value属性(react native textinput)

15

在这篇文章中,我们将带领您了解React-Native填坑之TextInputvalue属性的全貌,包括reactnativetextinput的相关情况。同时,我们还将为您介绍有关ReactNati

在这篇文章中,我们将带领您了解React-Native填坑之TextInput value属性的全貌,包括react native textinput的相关情况。同时,我们还将为您介绍有关React Native 之TextInput 高度自增长扩展实现、React Native之TextInput组件实现联想输入、React Native之TextInput组件解析示例、React Native填坑之旅 -- What''s next的知识,以帮助您更好地理解这个主题。

本文目录一览:

React-Native填坑之TextInput value属性(react native textinput)

React-Native填坑之TextInput value属性(react native textinput)

TextInput用法就不多讲了,主要记录下遇到的一个怪问题。


背景:项目需要开发一个充值页面,需要一个输入框,然后几个按钮,输入框是允许用户自己输入任意金额,按钮是可以让用户快捷选择金额。

那么问题来了,一般来说是改变文本框的值就可以了。

比如这样
<TextInput placeholderTextColor='#cccccc' underlineColorAndroid='transparent' keyboardType={'numeric'} style={styles.inputStyle} value ={this.state.money} onChangeText={(text)=>this.changeMoney(text)} />
 
 
然后在其他需要改变value值的地方,这样写
 
 
checkMoney(text) {
    this.setState({
        money: text
    });
}
乐观的情况是:我可以点击按钮可以改变文本框的值,也可以用户自己输入,
但是,但是,但是,重点来了,它根本不让你输入,光标一直闪烁。
看了文档,给的解释是:
	TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,
	不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入,
	可以考虑设置editable={false};如果你是希望限制输入的长度,可以考虑设置maxLength属性,这两个属性都不会导致闪烁。
然而加上没有什么卵用。
 
 
无奈只有再去找看看有没有什么可用的属性,没想到被我找到了,激动的要写一篇文章来记录下。
 
 

提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。

在一些简单的使用情形下,如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候,就可以用defaultValue来代替。

描述的还是云里雾里的,但是用defaultValue来代替value就能完美完成我的期望了。

React Native 之TextInput 高度自增长扩展实现

React Native 之TextInput 高度自增长扩展实现

新建一组件 ImageEqualEnlarge.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{ Component } from 'react';
import {
  StyleSheet,Text,TextInput,View
} from 'react-native';


export default class AutoExpandingTextInput extends Component {

  constructor(props) {
    super(props);
    this.state = {
      text:'',height:0
    };
    this.onChange=this._onChange.bind(this);
  }

  _onChange(event){
    this.setState({
       text:event.nativeEvent.text,height:event.nativeEvent.contentSize.height,});
  }

  render() {
    return (
      <TextInput {...this.props}
       multiline={true}
       onChange={this.onChange}
       style={[styles.textInputStyle,{height:Math.max(35,this.state.height)}]}
       value={this.state.text}
       >
      </TextInput>
    );
  }


}

const styles = StyleSheet.create({
  textInputStyle:{
    fontSize:40,width:300,height:30,alignItems: 'center',backgroundColor:'grey',paddingTop:0,paddingBottom:0
  }

});

在index.android.js 引用
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React,{ Component } from 'react';
import {
  AppRegistry,StyleSheet,Image,TouchableHighlight,StatusBar,View
} from 'react-native';

import AutoExpandingTextInput from './AutoExpandingTextInput'

export default class ViewProject extends Component {

     _onChangeText(newText) {
        console.log('inputed text:' + newText);
    }

  render() {
    return (
      <View style={styles.container}>
        <AutoExpandingTextInput 
          onChangeText={(newText)=>{this._onChangeText(newText)}}
        />
      </View>
    );
  }


}



const styles = StyleSheet.create({
  container: {
    flex:1,justifyContent: 'center',backgroundColor:'#F5FCFF'
  }
});
AppRegistry.registerComponent('ViewProject',() => ViewProject);

React Native之TextInput组件实现联想输入

React Native之TextInput组件实现联想输入

TextInput组件是最基本的组件,相关介绍请查看TextInput组件介绍

输入框组件属性

输入框组件的主要属性如下:

  • autoCapitalize :
    枚举类型,可选值有none,sentences,words,characters.当用户输入时,用于提示。
  • placeholder:占位符,在输入前显示的文本内容。
  • value : 文本输入框的默认值。
  • placeholdertTextColor : 占位符文本颜色。
  • password : 如果为ture , 则是密码输入框,文本显示为***。
  • multiline : 如果为true , 则是多行输入。
  • editable : 如果为false , 文本框不可输入。其默认值事true。
  • autoFocus : 如果为true, 将自动聚焦。
  • clearButtonMode : 枚举类型,可选值有never,while-enditing,
    unless-editing,always.用于显示清除按钮。
  • maxLength : 能够输入的最长字符数。
  • enablesReturnKeyAutomatically :
    如果值为true,表示没有文本时键盘是不能有返回键的。其默认值为false。
  • returnKeyType :
    表示软键盘返回键显示的字符串。枚举类型,可选值有default,go,google,join,next,route,search,send,yahoo,done,emergency-call。
  • onChangeText : 当文本输入框的内容发生变化时,调用该函数。
  • onChangeText接收一个文本的参数对象。
  • onChange : 当文本变化时,调用该函数。
  • onEndEditing : 当结束编辑时,调用该函数。
  • onBlur : 失去焦点出发事件。
  • onFocus : 获得焦点出发事件。
  • onSubmitEditing : 当结束编辑后,点击键盘的提交按钮出发该事件。

实例

在实际开发中,我们经常会碰到联想输入的情况,有的是结合后台返回的,有的是本地联想的。那么今天我们看一个联想输入的例子:

我们通过给TextInput绑定onChangeText监听事件,从而实现联想功能。

/** * Sample React Native App * https://github.com/facebook/react-native * @flow TextInput自动提示输入 */

 import React,{ Component } from 'react';
 import {
   AppRegistry,StyleSheet,Text,Image,TextInput,View
 } from 'react-native';

 var Dimensions = require('Dimensions');
 var ScreenWidth = Dimensions.get('window').width;

class TextInputView extends Component {

  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

   //隐藏
    hide(val){
        this.setState({
            show: false,value: val
        });
    }

    //获取value值调用的方法
    getValue(text) {
        var value = text;
        this.setState({
            show: true,value: value
        });
    }

   render() {
     return (
       <View style={styles.container}>
       <TextInput style = {styles.styleInput}
          returnKeyType = "search"
          placeholder= "请输入搜索关键字"
          onEndEditing = {this.hide.bind(this,this.state.value)}
          value = {this.state.value}
          onChangeText = {this.getValue.bind(this)}/>

          <Text style={styles.styleText}>搜索结果:</Text>

         {this.state.show?
          <View style = {[styles.styleResult]}>
          <Text onPress= {this.hide.bind(this,this.state.value + '街')}
            style = {styles.item}
            numberOfLines = {1}>{this.state.value}街</Text>
          <Text onPress = {this.hide.bind(this,this.state.value + '商厦')}
            style = {styles.item}
            numberOfLines = {1}>{this.state.value}商厦</Text>
          <Text onPress = {this.hide.bind(this,111 + this.state.value + '超市')}
            style = {styles.item}
            numberOfLines = {1}>111{this.state.value}超市</Text>
          <Text onPress = {this.hide.bind(this,this.state.value + '车站')}
            style = {styles.item}
            numberOfLines = {1}>{this.state.value}车站</Text>
           </View>:null}
       </View>
     );
    }
  }

 const styles = StyleSheet.create({
   container: {
     flex: 1,backgroundColor:'#ffffff',marginTop:20
   },styleInput: {
     height: 40,borderWidth: 1,marginLeft: 10,marginRight:10,paddingLeft: 5,borderColor: '#cccccc',borderRadius: 4,},styleResult: {
    marginTop: 10,marginLeft: 15,styleText: {
     fontSize: 18,marginTop:10,marginLeft:15
   },styleItem: {
    fontSize: 20,padding: 5,paddingTop: 10,paddingBottom: 10,marginLeft:15,borderColor: '#dddddd',borderTopWidth: 0,}
 });

export default TextInputView;

React Native之TextInput组件解析示例

React Native之TextInput组件解析示例

1 概述

TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。

2 属性

TextInput组件支持所有的View组件的属性,除此之外,它还有许多其他属性。

2.1 onChangeText

当输入框的内容发生变化时,就会调用onChangeText。

index.Android.js

rush:js;"> import React,{Component} from 'react'; import {AppRegistry,StyleSheet,View,TextInput,Button,Alert} from 'react-native'; class TextApp extends Component { constructor(props) { super(props); this.state = { searchText: "" } } render() { return ( { this.setState({searchText: text}); }}/> { Alert.alert('输入的内容为:' + this.state.searchText); } }/> ); } } const styles = StyleSheet.create({ container: { flex: 1,},searchBar: { flexDirection: 'row',height: 45,justifyContent: 'center',alignItems: 'center' },input: { flex: 1,borderColor: 'gray' },button: { flex: 1 } }); AppRegistry.registerComponent('ViewSample',() => TextApp);

上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText中将text的内容保存到state中。当我们点击Button时,通过Alert将state中保存的内容展现出来。

运行程序效果如下图所示。

在输入框中输入android,点击搜索Button,可以看到输入的Android展示到了Alert中。

2.2 onChange

当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码:

rush:xml;"> ... { this.setState({searchText: event.nativeEvent.text}); }}/> ...

通过event.nativeEvent.text可以得到用户输入的内容,如果只是想要得到用户输入的内容,还是用onChangeText比较合适。

2.3 keyboardType

keyboardType用于设置弹出软键盘的类型。它的取值为范围为: enum(‘default',‘email-address',‘numeric',‘phone-pad',‘ascii-capable',‘numbers-and-punctuation',‘url',‘number-pad',‘name-phone-pad',‘decimal-pad',‘twitter',‘web-search') ,其中default、numeric、email-address和phone-pad是跨平台。

rush:xml;"> ... { this.setState({searchText: text}); }}/> ...

将keyboardType的值设置为phone-pad,效果如下图所示。

2.4 blurOnSubmit

如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。

在单行的情况下,点击键盘上的提交按钮时,TextInput的效果如下图所示。

将blurOnSubmit设置为false:

rush:xml;"> ... { this.setState({searchText: text}); }}/> ...

点击键盘上的提交按钮时,TextInput的效果如下图所示。

2.5 onSubmitEditing

当提交键被按下时会调用onSubmitEditing,如果multiline等于true,则此属性不可用。

rush:xml;"> ... { this.setState({searchText: text}); }} onSubmitEditing={(event) => { console.log(event.nativeEvent.text); }} /> ...

运行程序并在App的开发菜单中选择Debug JS Remotely,这时我们输入Android并按下提交键,在Console控制台中就会输出结果。(笔者用的是WebStorm)

2.6 returnKeyType

用于设置软键盘回车键的样式,Android平台可以使用returnKeyLabel来设置软键盘回车键的内容。

returnKeyType的取值为enum(‘done',‘Go',‘next',‘search',‘send',‘none',‘prevIoUs',‘default',‘emergency-call',‘google',‘join',‘route',‘yahoo')。

其中跨平台的取值有:done、next、search、send。

Android平台独有:none、prevIoUs。

iOS平台独有:default、emergency-call、google、join、route、yahoo。

如果我们将returnKeyType设置为go时,效果如下图所示。

returnKeyType设置为send时,效果如下图所示。

2.7 其他跨平台属性

属性名 取值 说明 自动大写规则,取值分别表示:不自动大写、每句话首字母自动大写、每个单词首字母大写、全部字母自动大写自动检测用户输入的英语单词正确性,默认值为true默认值为false。用户开始输入时,该值将改变提示用户应该输入什么修改字符,默认值为true用户输入多少字符默认值为false默认值为false获取焦点时,组件中的内容会被自动选中调用此回调函数调用此回调函数调用,参数为{x,y,width,height}内容滚动时持续调用,传回参数的格式形如{ nativeEvent: { contentOffset: { x,y } } }调用此函数,传回参数的格式形如 { nativeEvent: { selection: { start,end } } }文字内容

2.8 Android平台独有属性

属性名 取值 说明 图片放置在左侧图片的Padding(如果有的话),以及文本框本身的Paddingnes键盘回车键的内容,优先级高于returnKeyTypedisableFullscreenUI默认值),如果TextInput的输入空间小,系统可能会进入全屏文本输入模式

2.9 iOS平台独有属性

属性名 取值 说明 调用此回调,传递给回调函数的参数为{ nativeEvent: { key: keyvalue } }键盘会在文本框内没有文字的时候禁用确认按钮 ,默认值为false

3 方法

clear()

clear用于清空输入框的内容。

想要使用组件的方法则需要使用组件的引用,例子如下所示。

rush:js;"> ... render() { return ( { this.setState({searchText: text}); }} /> { this.refs.textInputRefer.clear(); } }/> ); } ...

在TextInput标签中定义引用的名称:ref="textInputRefer",这样我们通过 this.refs.textInputRefer就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。

isFocused(): boolean

返回值表明当前输入框是否获得了焦点。

好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。希望对大家的学习有所帮助,也希望大家多多支持小编。

React Native填坑之旅 -- What''s next

React Native填坑之旅 -- What''s next

记录一下后面要写的:

  1. Redux hooks
  2. Gesture responder system
  3. New navigation
  4. Web
  5. Brief instroduction of desktop dev
  6. GraphQL & Apollo
  7. Permission

我们今天的关于React-Native填坑之TextInput value属性react native textinput的分享就到这里,谢谢您的阅读,如果想了解更多关于React Native 之TextInput 高度自增长扩展实现、React Native之TextInput组件实现联想输入、React Native之TextInput组件解析示例、React Native填坑之旅 -- What''s next的相关信息,可以在本站进行搜索。

本文标签: