【React Native开发】- TextInput键盘输入文本
2017-06-05 16:39
691 查看
1.TextInput介绍
TextInput是一个允许用户通过键盘输入文本的的组件,该组件提供了多种配置的属性,如自动完成、自动大小写等等。注意:通过onChangeText从TextInput中获取用户录入的文本是目前唯一的方法。
2.属性
-autoCapitalize:
PropTypes.oneOf(['none','sentences','words','characters',])
控制TextInput是否要自动的切换为大写。‘none’:不自动切换;‘sentences’:每句话的每一个字符(默认);‘word’:每个单词的第一个 字符;‘characters’:所有的字符。
- autoCorrect: PropTypes.bool,如果为false,自动关闭拼写修正,默认true。
- autoFocus: PropTypes.bool,如果为true,在componentDidMount后会获得焦点,默认false.
- blurOnSubmit: PropTypes.bool,如果为true,文本框会在提交的时候失焦。对于单行输入框默认值为true,多行则为false。 注意:对于多行输入框来说,如果将blurOnSubmit设为true,则在按下回车键时就会失去焦点同时触发onSubmitEditing事件,而不会换行。
- defaultValue: PropTypes.node, 提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。在一些简单的使用情形下,如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候,就可以用defaultValue来代替。
- value: PropTypes.string,文本框中的文字内容。TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,
不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。
如果你希望阻止用户输入,可以考虑设置
editable={false};如果你是希望限制输入的长度,可以考虑设置
maxLength属性,这两个属性都不会导致闪烁。
- editable: PropTypes.bool,如果为false,文本框是不可编辑的。默认值为true。
- keyboardType: PropTypes.oneOf([ // Cross-platform 'default',//默认 'email-address',//email地址 'numeric',//数字键盘 'phone-pad',//手机 // iOS-only 'ascii-capable', 'numbers-and-punctuation', 'url', 'number-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search', ])决定弹出的何种软键盘的,如[code]numeric(纯数字键盘)。
[/code]
- placeholder: PropTypes.node,如果没有任何文字输入,会显示此字符串。
- placeholderTextColor: ColorPropType,占位字符串显示的文字颜色。
- maxLength: PropTypes.number,限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现,可以避免闪烁的现象。
- multiline: PropTypes.bool,如果为true,文本框中可以输入多行文字。默认值为false。
- onBlur: PropTypes.func,当文本框失去焦点的时候调用此回调函数。
- onChange: PropTypes.func,当文本框内容变化时调用此回调函数。
- onChangeText: PropTypes.func,当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
- onEndEditing: PropTypes.func,当文本输入结束后调用此回调函数。 - onFocus: PropTypes.func,当文本框获得焦点的时候调用此回调函数。 - onLayout: PropTypes.func,当组件挂载或者布局变化的时候调用,参数为[code]{x, y, width, height}。
[/code]
- onScroll: PropTypes.func,在内容滚动时持续调用,传回参数的格式形如[code]{ nativeEvent: { contentOffset: { x, y } } }。
也可能包含其他和滚动事件相关的参数,但是在Android上,出于性能考虑,不会提供contentSize参数。
[/code]
- onSelectionChange: PropTypes.func,长按选择文本时,选择范围变化时调用此函数,传回参数的格式 形如[code]{ nativeEvent: { selection: { start, end } } }。
[/code]
- onSubmitEditing: PropTypes.func,此回调函数当软键盘的[code]确定/
提交按钮被按下的时候调用此函数。如果
multiline={true},此属性不可用。
[/code]
- secureTextEntry: PropTypes.bool,如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。
- selectTextOnFocus: PropTypes.bool,如果为true,当获得焦点的时候,所有的文字都会被选中。
- selection: PropTypes.shape({ start: PropTypes.number.isRequired, end: PropTypes.number, }),- selectionColor: ColorPropType,设置输入框高亮时的颜色(在iOS上还包括光标)。
- returnKeyType: PropTypes.oneOf([
// Cross-platform 'done', 'go', 'next', 'search', 'send', // Android-only 'none', 'previous', // iOS-only 'default', 'emergency-call', 'google', 'join', 'route', 'yahoo', ]), /*@platform android*/
- disableFullscreenUI: PropTypes.bool. - inlineImageLeft: PropTypes.string.
- inlineImagePadding: PropTypes.number.
- returnKeyLabel: PropTypes.string.
- textBreakStrategy: React.PropTypes.oneOf(['simple', 'highQuality', 'balanced']),.
- numberOfLines: PropTypes.number. - underlineColorAndroid: ColorPropType.
/*@platform ios*/ - spellCheck: PropTypes.bool,
- clearButtonMode: PropTypes.oneOf([ 'never', 'while-editing', 'unless-editing', 'always', ]),是否要在文本框右侧显示“清除”按钮。
- clearTextOnFocus: PropTypes.bool,如果为true,每次开始输入的时候都会清除文本框的内容。
- enablesReturnKeyAutomatically: PropTypes.bool,如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
- dataDetectorTypes: PropTypes.oneOfType([ PropTypes.oneOf(DataDetectorTypes), PropTypes.arrayOf(PropTypes.oneOf(DataDetectorTypes)), ]),
- keyboardAppearance: PropTypes.oneOf([指定键盘的颜色。 'default', 'light', 'dark', ]),
- onKeyPress: PropTypes.func,当一个键被按下的时候调用此回调。传递给回调函数的参数为[code]{ nativeEvent: { key: keyValue } },
其中keyValue即为被按下的键。会在onChange之前调用。[/code]
- selectionState: PropTypes.instanceOf(DocumentSelectionState),可以控制一个文档中哪段文字被选中的状态。
3.实例
index.android.js和index.ios.js中代码:import './luancher' luancher.js代码
import React, { Component } from 'react'; import { AppRegistry, } from 'react-native';
import Root from './inputText/root' AppRegistry.registerComponent('ImageDemo', () => Root);
root.js代码:
import React,{Component} from 'react' import { StyleSheet, Text, View, TextInput, Dimensions, } from 'react-native' const {width,height} = Dimensions.get('window') export default class Root extends Component{ constructor(props){ super(props) this.state = { inputText:'' } } render(){ return ( <View style={styles.container}> <TextInput style={styles.input} placeholder="请输入文本信息"//占位符 returnKeyType='search'//回车键的类型 maxLength={50}//限制文本框的最多字符数 numberOfLines={1}//显示的行数 underlineColorAndroid='#FD6363'//android平台,下划线 autoCapitalize='words'//自动转换大写 keyboardType='default'//软键盘的类型 secureTextEntry={true}//true文本框会遮住之前输入的文本 selectTextOnFocus={true}//true获得焦点时,文本全选中 onChangeText={(text) => this.setState({inputText:text})}//文本内容发生变化时,执行回调函数,改变后的文本内容会作为参数传递 > </TextInput> <Text style={styles.text}> 输出的文本:{this.state.inputText} </Text> </View> ) } } const styles = StyleSheet.create({ container:{ flex:1, }, input:{ height:40, margin:10, }, text:{ marginLeft:10, } })
4.效果
相关文章推荐
- 混合开发的大趋势之一React Native TextInput (文本输入)
- 混合开发的大趋势之一React Native TextInput (文本输入)
- React Native TextInput键盘遮挡输入款问题
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- Android开发笔记(一百三十八)文本输入布局TextInputLayout
- react-native-auto-expanding-textinput 根据输入的内容自增长高度
- React Native之TextInput组件实现联想输入
- React Native开发之——组件TextInput(3)
- React Native TextInput 实现文本间隔
- React Native开发之——组件TextInput(2)
- React Native TextInput 提交时/return时 如何隐藏输入光标
- React Native 处理TextInput在输入后,点击布局空白处软件盘能弹出和收回。
- React Native 键盘管理和 Tab Navigator 在Android TextInput遮盖,Tab Navigator上移等问题解决办法
- React Native Android上TextInput输入值被遮挡
- React-Native通过登录界面学习TextInput组件
- 安卓简单开发-Edittext限制输入文本
- HoloLens开发手记 - Unity之Keyboard input 键盘输入
- [React Native]高度自增长的TextInput组件