1.TextInput组件基本介绍:

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置,譬如自动完成、自动大小写、占位文字,以及多种不同的键盘类型(如纯数字键盘)等等。

最简单的用法就是丢一个TextInput到应用里,然后订阅它的onChangeText事件来读取用户的输入。它还有一些其它的事件,譬如onSubmitEditing和onFocus。一个简单的例子如下:

<TextInput

style={{height: 40, borderColor: 'gray', borderWidth: 1}}

onChangeText={(text) => this.setState({text})}

value={this.state.text}

/>

注意有些属性仅在multiline为true或者为false的时候有效。此外,当multiline=false时,为元素的某一个边添加边框样式(例如:borderBottomColor,borderLeftWidth等)将不会生效。为了能够实现效果你可以使用一个View来包裹TextInput:

<View style={{ borderBottomColor: '#000000', borderBottomWidth: 1, }}>

<TextInput {...props} />

</View>

2>属性

属性
autoCapitalize enum('none', 'sentences', 'words', 'characters') 控制TextInput是否要自动将特定字符切换为大写: characters: 所有的字符。
words: 每个单词的第一个字符。
sentences: 每句话的第一个字符(默认)。
none: 不自动切换任何字符为大写。
autoCorrect bool 如果为false,会关闭拼写自动修正。默认值是true。 autoFocus bool 如果为true,在componentDidMount后会获得焦点。默认值为false。 blurOnSubmit bool 如果为true,文本框会在提交的时候失焦。对于单行输入框默认值为true,多行则为false。注意:对于多行输入框来说,如果将blurOnSubmit设为true,则在按下回车键时就会失去焦点同时触发onSubmitEditing事件,而不会换行。 defaultValue string 提供一个文本框中的初始值。当用户开始输入的时候,值就可以改变。 在一些简单的使用情形下,如果你不想用监听消息然后更新value属性的方法来保持属性和状态同步的时候,就可以用defaultValue来代替。 editable bool 如果为false,文本框是不可编辑的。默认值为true。 keyboardType enum("default", 'numeric', 'email-address', "ascii-capable", 'numbers-and-punctuation', 'url', 'number-pad', 'phone-pad', 'name-phone-pad', 'decimal-pad', 'twitter', 'web-search') 决定弹出的何种软键盘的,譬如numeric(纯数字键盘)。 这些值在所有平台都可用: default
numeric
email-address
maxLength number 限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现,可以避免闪烁的现象。 multiline bool 如果为true,文本框中可以输入多行文字。默认值为false。 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上还包括光标) style Text#style 译注:这意味着本组件继承了所有Text的样式。 value string 文本框中的文字内容。 TextInput是一个受约束的(Controlled)的组件,意味着如果提供了value属性,原生值会被强制与value属性保持一致。在大部分情况下这都工作的很好,不过有些情况下会导致一些闪烁现象——一个常见的原因就是通过不改变value来阻止用户进行编辑。如果你希望阻止用户输入,可以考虑设置editable={false};如果你是希望限制输入的长度,可以考虑设置maxLength属性,这两个属性都不会导致闪烁。 iosclearButtonMode enum('never', 'while-editing', 'unless-editing', 'always') 是否要在文本框右侧显示“清除”按钮。 iosclearTextOnFocus bool 如果为true,每次开始输入的时候都会清除文本框的内容。 iosenablesReturnKeyAutomatically bool 如果为true,键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。 ioskeyboardAppearance enum('default', 'light', 'dark') 指定键盘的颜色。 iosonKeyPress function 当一个键被按下的时候调用此回调。被按下的键会作为参数传递给回调函数。会在onChange之前调用。 iosreturnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call') 决定“确定”按钮显示的内容。 iosselectionState DocumentSelectionState 参见DocumentSelectionState.js,可以控制一个文档中哪段文字被选中的状态。 androidnumberOfLines number 设置输入框的行数。当multiline设置为true时使用它,可以占据对应的行数。 androidunderlineColorAndroid string 文本框的下划线颜色(译注:如果要去掉文本框的边框,请将此属性设为透明transparent)。

 3>方法:

isFocused(): boolean #

返回值表明当前输入框是否获得了焦点。

clear() 

清空输入框的内容。

4>实现:
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/ import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
} from 'react-native'; class ViewDemo extends Component {
render() {
return (
// 一定要设置样式和宽高,TextInput才能显示出来
<View style ={styles.container}>
<TextInput
style = {styles.inputStyle}
// 键盘类型
keyboardType = {'number-pad'}
// 默认文字 注意默认文字是不能删除的
value = {'我是默认文字'}
// // 多行显示
multiline = {true}
// // 密码输入 注意和multiline冲突
password = {true}
// // 占位字符
palceholder = {"请输入"}
// // 清除按钮
clearButtonMode = {'always'}
/>
</View>
);
}
} const styles = StyleSheet.create({
container: {
flex: ,
backgroundColor: '#f5fcff', },
inputStyle: { // 间距
marginTop: ,
// 背景颜色
backgroundColor: 'red',
// 边框
borderWidth: ,
// 宽度
width: ,
// 高度
height: ,
borderColor: '#ebebeb'
},
}); AppRegistry.registerComponent('ViewDemo', () => ViewDemo);

TextInput组件的常用属性的更多相关文章

  1. Flutter中的Container和Text组件的常用属性

    效果图: import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends St ...

  2. ReactNative: 使用输入框TextInput组件

    一.简介 一个应用程序中,输入框基本不可或缺,它衍生的搜索功能在很多APP中随处可见.在iOS开发中,使用的输入框组件是UITextView和UITextField,在React-Native中使用的 ...

  3. Tkinter的l组件常用属性

    Label常用属性 序号 属性 说明 1  anchor   指示文字会被放在控件的什么位置, 可选项有 N, NE, E, SE, S, SW, W, NW, CENTER. 默认为 CENTER. ...

  4. Salesforce学习之路-developer篇(五)Aura组件原理及常用属性

    很喜欢曾经看到的一句话:以输出倒逼输入.以输出的形式强制自己学习,确实是高效的学习方式,真的很棒.以下仅为个人学习理解,如有错误,欢迎指出,共同学习. 1. 什么是Lightning Componen ...

  5. 【Android自学日记】五大布局常用属性

    线性布局(LinearLayout)常用属性: android:orientation="vertical"--决定子类控件的排布方式(vertical垂直:horizontal水 ...

  6. WPF DataGrid常用属性记录

    WPF DataGrid常用属性记录 组件常用方法: BeginEdit:使DataGrid进入编辑状态. CancelEdit:取消DataGrid的编辑状态. CollapseRowGroup:闭 ...

  7. (转载)StringGrid常用属性和常用操作

    Delphi StringGrid常用属性和常用操作 StringGrid组件用于建立显示字符串的网格,与电子表格相似.它可使表格中的字符串和相关对象操作简单化.StringGrid组件提供了许多可控 ...

  8. (转载)Delphi StringGrid常用属性和常用操作

    Delphi StringGrid常用属性和常用操作 StringGrid组件用于建立显示字符串的网格,与电子表格相似.它可使表格中的字符串和相关对象操作简单化.StringGrid组件提供了许多可控 ...

  9. TComboBox组件的重要属性

    TComboBox组件的重要属性 CharCase--------此属性用于设置编辑框内文字的大小写DropDownCount---此属性用于设置当用户下拉组合框时不需要加滚动条就能显示的项的个数Dr ...

随机推荐

  1. Springboot静态资源映射 “/” 引发的血案

    因为少写一个 / 浪费已个下午的时间,

  2. WinForm DevExpress使用之ChartControl控件绘制图表二——进阶

    1. 多坐标折线图 在这个项目中,我需要做不同采集地方和不同数据类型的数据对比,自然而然就用到了多重坐标轴,多重坐标轴可以是多个X轴,也可以是Y轴,它们的处理方式类似.本文通过项目中的实际例子介绍多重 ...

  3. Spark任务调度初识

    前置知识 spark任务模型 job:action的调用,触发了DAG的提交和整个job的执行. stage:stage是由是否shuffle来划分,如果发生shuffle,则分为2个stage. t ...

  4. 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数

    需求: 在Chrome浏览器中点击链接,打开IE浏览器,跳转到指定页面并传递参数 过程: 一些应用软件可以通过点击URL链接启动并执行操作(例如迅雷),这是如何做到的呢? 主要是通过修改注册表,注册U ...

  5. Bootstrap-轮播图-No.7

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  6. NPM全局安装软件包时解决EACCES权限错误

    NPM全局安装软件包时解决EACCES权限错误 Resolving EACCES permissions errors when installing packages globally npm WA ...

  7. 01_初识redis

    1.redis和mysql mysql是一个软件,帮助开发者对一台机器的硬盘进行操作. redis是一个软件,帮助开发者对一台机器的内存进行操作 汽车之家,如果硬盘挂掉了,页面还能访问1个月 关键字: ...

  8. String类的format方法的用法

    public class Test { public static void main(String[] args) { String url = "https://api.weixin.q ...

  9. MySQL基础练习01--牛客网

    目录 1 查找最晚入职员工的信息 2 查找入职第三晚的员工信息 3 查找当前薪水详情及部门编号 4 查找所有员工入职时的薪水情况 5 查找已分配员工姓名 6 查找员工姓名 7 查找涨薪找过15次的员工 ...

  10. 【java设计模式】-05建造者模式

    建造者模式 简述 建造者模式,是将一个复杂对象的创建和它的表示分离开来,这就使得同样的构建构成可以有不同的表示. 建造者模式是一步步构建一个复杂的对象,允许用户只需要指定复杂对象的类型和必要的内容就可 ...