React Native 之 TextInput使用
2016-11-03 10:51
585 查看
前言
学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会有所偏差,在学习中如果有错会及时修改内容,也欢迎万能的朋友们批评指出,谢谢
文章第一版出自简书,如果出现图片或页面显示问题,烦请转至 简书 查看 也希望喜欢的朋友可以点赞,谢谢
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="请输入账号" 110dd 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> ); } });
效果:
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,按钮Button搭建登录界面
- react native TextInput 使用详解
- React Native之TextInput的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例)
- reactnative textinput 使用
- React-Native 之 TextInput使用
- 《React-Native系列》RN组件之Text和TextInput以及注意要点
- React-Native TextInput组件的主要属性
- React Native Android上TextInput输入值被遮挡
- React Native 键盘管理和 Tab Navigator 在Android TextInput遮盖,Tab Navigator上移等问题解决办法
- react native TextInput无法弹出输入框问题
- 混合开发的大趋势之一React Native TextInput (文本输入)
- 混合开发的大趋势之一React Native TextInput (文本输入)
- React Native 处理TextInput在输入后,点击布局空白处软件盘能弹出和收回。
- React Native之TextInput自定义
- React-Native TextInput组件详解及实例代码
- react-native学习笔记之<TextInput>
- [React Native]高度自增长的TextInput组件
- react native textInput随内容高度设置textinput高度