在这篇文章中,我们将带领您了解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 高度自增长扩展实现
- React Native之TextInput组件实现联想输入
- React Native之TextInput组件解析示例
- React Native填坑之旅 -- What''s next
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 高度自增长扩展实现
新建一组件 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组件实现联想输入
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组件解析示例
1 概述
TextInput组件和Text组件类似,内部都没有使用FlexBox布局,不同的是TextInput组件支持文字的输入,因为支持文字输入, TextInput组件要比Text组件多了一些属性和方法。TextInput组件支持Text组件所有的Style属性,而TextInput组件本身是没有特有的Style属性的。
2 属性
TextInput组件支持所有的View组件的属性,除此之外,它还有许多其他属性。
2.1 onChangeText
当输入框的内容发生变化时,就会调用onChangeText。
index.Android.js
上面的例子我们用到了TextInput组件的onChangeText属性,当我们在TextInput中输入内容时,这个内容就会通过onChangeText的参数text传递回来,在onChangeText中将text的内容保存到state中。当我们点击Button时,通过Alert将state中保存的内容展现出来。
运行程序效果如下图所示。
在输入框中输入android,点击搜索Button,可以看到输入的Android展示到了Alert中。
2.2 onChange
当输入框的内容发生变化时,也会调用onChange,只不过它所返回的参数是一个event,我们来改写2.1的代码:
通过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是跨平台。
将keyboardType的值设置为phone-pad,效果如下图所示。
2.4 blurOnSubmit
如果blurOnSubmit值为true,文本框会在按下提交键时失去焦点。对于单行输入框,blurOnSubmit默认值为true,多行则为false。
在单行的情况下,点击键盘上的提交按钮时,TextInput的效果如下图所示。
将blurOnSubmit设置为false:
点击键盘上的提交按钮时,TextInput的效果如下图所示。
2.5 onSubmitEditing
当提交键被按下时会调用onSubmitEditing,如果multiline等于true,则此属性不可用。
运行程序并在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 其他跨平台属性
2.8 Android平台独有属性
2.9 iOS平台独有属性
3 方法
clear()
clear用于清空输入框的内容。
想要使用组件的方法则需要使用组件的引用,例子如下所示。
在TextInput标签中定义引用的名称:ref="textInputRefer",这样我们通过 this.refs.textInputRefer就可以得到TextInput 组件的引用。在Button的onPress函数中,调用了TextInput的clear方法,这样当我们点击“清除”按钮时,文本框中的内容就会被清除。
isFocused(): boolean
返回值表明当前输入框是否获得了焦点。
好了,到这里TextInput组件就介绍到这里,还有一些没有列出的属性请查看官方文档。希望对大家的学习有所帮助,也希望大家多多支持小编。
React Native填坑之旅 -- What''s next
记录一下后面要写的:
- Redux hooks
- Gesture responder system
- New navigation
- Web
- Brief instroduction of desktop dev
- GraphQL &
Apollo - Permission
我们今天的关于React-Native填坑之TextInput value属性和react native textinput的分享就到这里,谢谢您的阅读,如果想了解更多关于React Native 之TextInput 高度自增长扩展实现、React Native之TextInput组件实现联想输入、React Native之TextInput组件解析示例、React Native填坑之旅 -- What''s next的相关信息,可以在本站进行搜索。
本文标签: