React Native控件只TextInput
TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。
比如官网最简单的写法:
import React, { Component } from 'react'; import { AppRegistry, TextInput } from 'react-native'; class UselessTextInput extends Component { constructor(props) { super(props); this.state = { text: 'Useless Placeholder' }; } render() { return ( <TextInput style={{height: 40, borderColor: 'gray', borderWidth: 1}} onChangeText={(text) => this.setState({text})} value={this.state.text} /> ); } } // App registration and rendering AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);
对于TextInput我们重点需要了解控件的属性,以方便我们实行不同的效果。
TextInput属性
autoCapitalize enum('none', 'sentences', 'words', 'characters')
控制TextInput是否要自动将特定字符切换为大写:
- characters: 所有的字符。
- words: 每个单词的第一个字符。
- sentences: 每句话的第一个字符(默认)。
- none: 不自动切换任何字符为大写。
autoCorrect bool
autoFocus bool
blurOnSubmit bool
defaultValue string
editable bool
keyboardType
这些值在所有平台都可用
- default
- numeric
- email-address
multiline bool
onBlur function
onChange function
当文本框内容变化时调用此回调函数。
onChangeText function
当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。
onEndEditing function
当文本输入结束后调用此回调函数。
onFocus function
当文本框获得焦点的时候调用此回调函数。
onLayout function
当组件挂载或者布局变化的时候调用,参数为{x, y, width, height}。
onSubmitEditing function
此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true},此属性不可用。
placeholder string
如果没有任何文字输入,会显示此字符串。
placeholderTextColor string
占位字符串显示的文字颜色。
secureTextEntry bool
如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。
selectTextOnFocus bool
如果为true,当获得焦点的时候,所有的文字都会被选中。
selectionColor string
设置输入框高亮时的颜色(在iOS上还包括光标)占位字符串显示的文字颜色。
secureTextEntry bool
如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。
selectTextOnFocus bool
如果为true,当获得焦点的时候,所有的文字都会被选中。
selectionColor string
设置输入框高亮时的颜色(在iOS上还包括光标)
style Text#style
译注:这意味着本组件继承了所有Text的样式。
value string
文本框中的文字内容。
TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入,可以考虑设置editable={false};如果你是希望限制输入的长度,可以考虑设置maxLength属性,这两个属性都不会导致闪烁。
这里需要说明几点:
1、<TextInput>组件在React Native中,默认是带一条横线的,如果想去掉输入框下面的横线,需要给<TextInput>指定一个underlineColorAndroid='transparent',这样就可以去掉输入框下面的横线了;
2、密码输入框需要指定属性:secureTextEntry={true}
3、要显示图片,必须为<Image>标签指定宽度和高度,和Android中不同的是,<Image>没法自动调整图片的大小,没有类似Android中的wrap_content。
代码如下:
/** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text, Image, View, TextInput } from 'react-native'; class ReactDemo extends Component { render() { return ( <View style={styles.container}> <View style={styles.header}> <Text style={styles.headtitle}>添加账号</Text> </View> <View style={styles.marginTopview}/> <View style={styles.inputview}> <TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='QQ号/手机号/邮箱'/> <View style={styles.dividerview}> <Text style={styles.divider}></Text> </View> <TextInput underlineColorAndroid='transparent' style={styles.textinput} placeholder='密码' secureTextEntry={true}/> </View> <View style={styles.bottomview}> <View style={styles.buttonview}> <Text style={styles.logintext}>登 录</Text> </View> <View style={styles.bottombtnsview}> <View style={styles.bottomleftbtnview}> <Text style={styles.bottombtn}>无法登录?</Text> </View> <View style={styles.bottomrightbtnview}> <Text style={styles.bottombtn}>新用户</Text> </View> </View> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#FFFFFF' }, header: { height: 50, backgroundColor: '#12B7F5', justifyContent: 'center', }, headtitle: { alignSelf: 'center', fontSize: 20, color: '#ffffff', }, avatarview: { height: 150, backgroundColor: '#ECEDF1', justifyContent: 'center', }, avatarimage: { width: 100, height: 100, alignSelf: 'center' }, marginTopview: { height: 15, backgroundColor: '#F7F7F9' }, inputview: { height: 100, }, textinput: { flex: 1, fontSize: 16, }, dividerview: { flexDirection: 'row', }, divider: { flex: 1, height: 1, backgroundColor: '#ECEDF1' }, bottomview: { backgroundColor: '#ECEDF1', flex: 1, }, buttonview: { backgroundColor: '#1DBAF1', margin: 10, borderRadius: 6, justifyContent: 'center', alignItems: 'center', }, logintext: { fontSize: 17, color: '#FFFFFF', marginTop: 10, marginBottom: 10, }, emptyview: { flex: 1, }, bottombtnsview: { flexDirection: 'row', }, bottomleftbtnview: { flex: 1, height: 50, paddingLeft: 10, alignItems: 'flex-start', justifyContent: 'center', }, bottomrightbtnview: { flex: 1, height: 50, paddingRight: 10, alignItems: 'flex-end', justifyContent: 'center', }, bottombtn: { fontSize: 15, color: '#1DBAF1', } }); AppRegistry.registerComponent('ReactDemo', () => ReactDemo);
这里如果需要调试的话请移步:http://blog.csdn.net/xiangzhihong8/article/details/52564391
最新文章
- QT中使用函数指针
- 解决360、猎豹浏览器等极速模式下css3兼容问题
- js获取样式的兼容写法
- 安装ESXi5.5遇到Relocating modules and starting up the kernel的处理
- 用phpcms开发模块时中文乱码问题
- Caffe学习系列(15):计算图片数据的均值
- C# 学习的随笔【随时更新】
- git中手动删除的文件如何在git中删除
- vs git .ignore
- MySQL flush tables with read lock
- mysql主从复制的配置总结
- C++入门篇三
- ionicAPP打开第三方APP
- yaf nginx 设置
- 【NET CORE微服务一条龙应用】第一章 网关使用与配置
- BZOJ1922:[SDOI2010]大陆争霸(最短路)
- POJ-1157 LITTLE SHOP OF FLOWERS(动态规划)
- Windows Azure系列公开课 - 第二课:为什么选择Windows Azure(上)
- Matrix Walk CodeForces - 954C
- Flex用HTTPService调用servlet返回中文乱码解决
热门文章
- truncated、delete和drop的异同点
- java.lang.ClassCastException: oracle.sql.CLOB cannot be cast to oracle.sql.CLOB
- JFinal中使用QuartzPlugin报ClassCastException解决方法
- 使用Linux脚本更新Weblogic部署的应用程序
- Python+Tkinter 密保小工具
- Dynamics CRM The difference between UserId and InitiatingUserId in Plugin
- [Python] 图像简单处理(PIL or Pillow)
- 剑指offer面试题5 从头到尾打印链表(c)
- COM原理与实现之一
- JVM学习之-栈