react native TextInput各个参数详解,内含事例动图
2016-12-28 15:05
671 查看
TextInput 文本输入框
React Native中的文本输入框使用和iOS比较相近,可能是因为 RN 首先封装iOS端的缘故(这点对iOS开发者来说是个好消息)TextInput也是继承自 View,所以 View 的属性 TextInput 也能使用,一些样式类的属性可以参照 View 的相关属性
为了更好的讲解 TextInput,先创建一个基本的文本输入框
// 视图 var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle}></TextInput> </View> ); } }); // 样式 var styles = StyleSheet.create({ container: { flex:1 }, textInputStyle: { // 设置尺寸 width:width, height:40, marginTop:100, // 设置背景颜色 backgroundColor:'green' } });
效果:
Value:文本输入的默认值(注:如果设置了此属性,会造成无法输入的尴尬,一般会搭配JS动态设置)
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} value="设置了Value" ></TextInput> </View> ); } });
效果:
keyboardType:设置键盘类型(决定使用哪种键盘)
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} keyboardType="number-pad" ></TextInput> </View> ); } });
效果:
multiline:如果值为真,文本输入可以输入多行,默认值为假
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} multiline={true} ></TextInput> </View> ); } });
效果:
password:如果值为真,文本输入框就成为一个密码区域,默认值为假
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} password={true} ></TextInput> </View> ); } });
效果:
placeholder:在文本输入之前提示用户文本框功能,也就是占位文字
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="请输入账号" ></TextInput> </View> ); } });
效果:
placeholderTextColor:占位字符串的文本颜色
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="请输入账号" placeholderTextColor="red" ></TextInput> </View> ); } });
效果:
autoCapitalize:控制TextInput是否要自动将特定字符切换为大写
none:不自动使用任何东西
sentences:每个句子的首字母(默认)
words:每一个单词的首字母
characters:所有字符
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="none" autoCapitalize="none" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="sentences" autoCapitalize="sentences" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="words" autoCapitalize="words" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="characters" autoCapitalize="characters" ></TextInput> </View> ); } });
效果:
autoCorrect:如果为false,会关闭拼写自动修正。默认值是true。
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="没有自动改正拼写" autoCorrect={false} ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="自动改正拼写" autoCorrect={true} ></TextInput> </View< f5ff /span>> ); } });
效果:
autoFocus:如果为true,在componentDidMount后会获得焦点。默认值为false。
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} autoFocus={true} ></TextInput> </View> ); } });
效果:
clearButtonMode:清除按钮出现的时机
never:不出现
while-editing:编辑的时候出现
unless-editing:没有编辑时出现
always:总是出现
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="never" clearButtonMode="never" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="while-editing" clearButtonMode="while-editing" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="unless-editing" clearButtonMode="unless-editing" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} placeholder="always" clearButtonMode="always" ></TextInput> </View> ); } });
效果:
clearTextOnFocus:如果为true,每次开始输入的时候都会清除文本框的内容
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} clearTextOnFocus={true} ></TextInput> </View> ); } });
效果:
editable:如果值为假,文本是不可编辑,默认值为真
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} editable={false} ></TextInput> </View> ); } });
效果:
enablesReturnKeyAutomatically:如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} enablesReturnKeyAutomatically={true} ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} enablesReturnKeyAutomatically={false} ></TextInput> </View> ); } });
效果:
returnKeyType:决定返回键的样式
default
go
join
next
route
search
send
yahoo
done
emergency-call
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} returnKeyType="go" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} returnKeyType="join" ></TextInput> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} returnKeyType="done" ></TextInput> </View> ); } });
效果:
secureTextEntry:如果值为真,文本输入框就会使输入的文本变模糊,以便于像密码这样敏感的文本保持安全,类似 password 属性,默认值为假
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} keyboardType="number-pad" ></TextInput> </View> ); } });
效果:
onChange:当文本框内容变化时调用此回调函数
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} onChange={() => {alert('文本框内容改变')}} ></TextInput> </View> ); } });
效果:
onChangeText:当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} onChangeText={(Text) => {alert('文字改变')}} ></TextInput> </View> ); } });
效果:
onFocus:当文本框获得焦点的时候调用此回调函数
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} onFocus={() => {alert('文本框获得焦点')}} ></TextInput> </View> ); } });
效果:
onBlur:当文本框失去焦点的时候调用此回调函数
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} onBlur={() => {alert('失去焦点')}} ></TextInput> </View> ); } });
效果:
onEndEditing:结束编辑时,调用回调函数
var textInputTest = React.createClass({ render(){ return( <View style={styles.container}> {/* 文本输入框 */} <TextInput style={styles.textInputStyle} onEndEditing={() => {alert('结束文本编辑')}} ></TextInput> </View> ); } });
效果:
相关文章推荐
- react native TextInput 使用详解
- React-Native TextInput组件详解及实例代码
- 混合开发的大趋势之一React Native TextInput (文本输入)
- React-Native TextInput组件的主要属性
- React Native 处理TextInput在输入后,点击布局空白处软件盘能弹出和收回。
- ReactNative TextInput 常用方法实践
- React Native之TextInput自定义
- React-Native通过登录界面学习TextInput组件
- react-native-auto-expanding-textinput 根据输入的内容自增长高度
- React Native 之 TextInput组件去掉下划线
- react native TextInput无法弹出输入框问题
- ReactNative textinput 常用方法
- [React Native]高度自增长的TextInput组件
- React-Native 之 TextInput使用
- React Native 之TextInput 高度自增长扩展实现
- 【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
- 基础篇章:React Native 之 TextInput 的讲解
- 《React-Native系列》RN组件之Text和TextInput以及注意要点
- react-native学习笔记之<TextInput>
- React Native Android上TextInput输入值被遮挡