前言
学习本系列内容需要具备一定 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="请输入账号"
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的介绍与使用(富文本封装与使用实例,常用输入框封装与使用实例) TextInput组件介绍 TextInput是一个允许用户在应用中通过键盘输入文本的基本组 ...
-
react native 封装TextInput组件
上一篇 react-native文章提到了TextInput组件对安卓的适配问题,因此对该组件进行封装很有必要. 文章地址 react native定报预披项目知识点总结 TextInput介绍 官 ...
-
React Native(十)——TextInput一点小结
11.24(后续的道路会更加漫长,一点一点总结上去吧~): 从昨天开始接触Mac,实在让自己有点“奔溃”的赶脚……老大说,“不要紧,多接触接触就好了.” 于是,我就开始了跟Mac死磕到底的准备……就先 ...
-
React Native之微信分享(iOS Android)
React Native之微信分享(iOS Android) 在使用React Native开发项目的时候,基本都会使用到微信好友或者微信朋友圈分享功能吧,那么今天我就带大家实现以下RN微信好友以及朋 ...
-
react native TextInput
今天我想说一下react native中的一个控件,TextInput 翻译过来就是文本输入,对应着android中的EditText.我们先看一下官方是怎样描述的.TextInput是一个允许用户在 ...
-
React Native 组件之TextInput
React Native 组件之TextInput类似于iOS中的UITextView或者UITextField,是作为一个文字输入的组件,下面的TextInput的用法和相关属性. /** * Sa ...
-
React Native控件只TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件.本组件的属性提供了多种特性的配置,譬如自动完成.自动大小写.占位文字,以及多种不同的键盘类型(如纯数字键盘)等等. 比如官网最简单的 ...
-
React Native(十三)&mdash;&mdash;ios键盘挡住textInput
渐入佳境 用React Native重构的项目也快接近尾声,剩下的就是适配ios的功能了.慢慢地也从中琢磨出了一点门道,于是就遇见了键盘遮挡textInput问题斑斑: 正常页面: android点击 ...
-
[RN] React Native 键盘管理 在Android TextInput遮盖，上移等问题解决办法
React Native 键盘管理 在Android TextInput遮盖,上移等问题解决办法 解决办法: 打开android工程,在AndroidManifest.xml中配置如下: <ac ...
随机推荐
-
SpringMVC使用@PathVariable，@RequestBody，@ResponseBody，@RequestParam，@InitBinder
@Pathvariable public ResponseEntity<String> ordersBack( @PathVariable String reqKey, ...
-
vm虚拟机启动失败 Global\vmx86
workstation12 PRO 启动虚拟机异常报错:无法打开内核设备“\\.\Global\vmx86”: 系统找不到指定的文件 解决方法,启动windows系统服务:
-
DIV内英文或者数字不换行的问题 解决办法
word-wrap:break-word; word-break:break-all;
-
win7+cygwin+hadoop+eclipse
1.Cygwin : Net 下的:openssh,openssl Base 下的:sed (若需要Eclipse,必须sed)默认即可 Devel 下的:subversion(建议安装) 2 ...
-
验证码的实现py3
import randomflag = 1try_=0while (flag): try_ +=1 yan = "" for i in range(0,4): cun=random ...
-
金山WPS一面
昨天下午在武汉面了一场服务端开发工程师吧,结果还未通知,是校招的, 大体上题目如下: 先自我介绍 然后是聊了一些笔试上的情况 问了spring的的作用以及优势 http的状态,三次握手四次挥手 gc的 ...
-
Springboot+WebSocket+Kafka（写着玩的）
闹着玩的来源:前台发送消息,后台接受处理发给kafka,kafka消费者接到消息传给前台显示.联想到websocket. 最终效果如图: 页面解释: 不填写内容的话,表单值默认为Topic.Greet ...
-
PLSQL基础学习-文字
--oracle 练习: /********************PL/SQL编程基础*******************************/ --firstday -->>&g ...
-
HDU.3516.Tree Construction(DP 四边形不等式)
题目链接 贴个教程: 四边形不等式学习笔记 \(Description\) 给出平面上的\(n\)个点,满足\(X_i\)严格单增,\(Y_i\)严格单减.以\(x\)轴和\(y\)轴正方向作边,使这 ...
-
Express浅谈
写给鸟自己的,大家如果不慎百度到这里来了,真好也在做这块功能,不懂的可以联系鸟.微信:jkxx123321 const Sequelize = require('sequelize'); const ...