ReactNative-TextInput用法

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

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

 <TextInput
    style={{height: 40, borderColor: ‘gray‘, borderWidth: 1}}
    onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />

*注意有些属性仅在multiline(多行输入)为true或者为false的时候有效。

常用属性

autoCapitalize enum(‘none‘, ‘sentences‘, ‘words‘, ‘characters‘)

控制TextInput是否要自动将特定字符切换为大写:

  • characters: 所有的字符。
  • words: 每个单词的第一个字符。
  • sentences: 每句话的第一个字符(默认)。
  • none: 不自动切换任何字符为大写。

autoFocus bool

如果为true,在componentDidMount后会获得焦点。默认值为false。

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(纯数字键盘)。

maxLength number

限制文本框中最多的字符数。使用这个属性而不用JS逻辑去实现,可以避免闪烁的现象。

multiline bool

如果为true,文本框中可以输入多行文字。默认值为false。

onChangeText function

当文本框内容变化时调用此回调函数。改变后的文字内容会作为参数传递。 

onEndEditing function

当文本输入结束后调用此回调函数。

onSubmitEditing function

此回调函数当软键盘的确定/提交按钮被按下的时候调用此函数。如果multiline={true},此属性不可用。

placeholder string

如果没有任何文字输入,会显示此字符串。

placeholderTextColor string

占位字符串显示的文字颜色。

secureTextEntry bool

如果为true,文本框会遮住之前输入的文字,这样类似密码之类的敏感文字可以更加安全。默认值为false。

clearButtonMode enum(‘never‘, ‘while-editing‘, ‘unless-editing‘, ‘always‘)

是否要在文本框右侧显示“清除”按钮。

例子

<TextInput
  style = {{height: 25, borderColor: ‘gray‘, borderWidth: 1, borderRadius: 3}}
  returnKeyType = "next"
  placeholder = "标题"
  onChangeText = {this.getValue} // 通过该方法获取输入框的值
/>

// 获取输入框内值的方法
getValue: function(text) {
  var value = text;
  this.setState({
    value: value
  });
}

时间: 2024-11-29 11:29:34

ReactNative-TextInput用法的相关文章

react native 中textInput的value属性详解

TextInput用法就不多讲了,主要记录下遇到的一个怪问题. 背景:项目需要开发一个充值页面,需要一个输入框,然后几个按钮,输入框是允许用户自己输入任意金额,按钮是可以让用户快捷选择金额. 那么问题来了,一般来说是改变文本框的值就可以了. 比如这样 <TextInput placeholderTextColor='#cccccc' underlineColorAndroid='transparent' keyboardType={'numeric'} style={styles.inputSt

React-Native——html/css

做前端开发,熟悉了HTML+CSS+JS的开发模式,如果不看RN原理,直接用老一套的逻辑思维上手RN,可能会大跌眼镜.高效开发的前提,需要学习并理解RN的原理.本文主要记录内容是,关于RN开发的HTML层面上的问题. 一.RN的HTML RN提供的组件(在HTML中叫标签)中常用的有: 1.View-视图容器 可用属性 style={[Styles.nav, { borderColor: '#0ff' }]} onLayout={(event) => { this.getViewInfo; }}

Learning ReactNative (一) : JavaScript模块基本原理与用法

在使用ReactNative进行开发的时候,我们的工程是模块化进行组织的.在npmjs.com几十万个库中,大部分都是遵循着CommonJS规则的.在ES6中引入了class的概念,从此JavaScript也可以更加方便地进行OOP编程.但是不变的是,即使在使用OOP编程,其依赖组织方式仍然是模块化的.因此,我们十分有必要了解JavaScript中模块的基本原理,以便在之后的开发过程中能少犯错误,更好的理解整个工程的结构. 本文以更容易理解的意识流的方式简要的介绍了一下require.js.mo

《React-Native系列》基于多个TextInput的键盘遮挡处理方案优化

以前写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况,建议读者可以先看看 1.<React-Native系列>33. 键盘遮挡问题处理 2.<React-Native系列>42.键盘遮挡问题官方处理方法KeyboardAvoidingView 以前给出的解决方案,是使用ScrollView的scrollTo方法,将表单的输入域移动到可见区域(从键盘遮挡处移到键盘上方). 这个方案存在以下问题: 1.移动距离的计算不精确 2.如果表单中有多个Text

《React-Native系列》44、基于多个TextInput的键盘遮挡处理方案优化

曾经写过两篇关于在ReactNative上处理键盘遮挡输入表单TextInput的情况.建议读者能够先看看 1.<React-Native系列>33. 键盘遮挡问题处理 2.<React-Native系列>42.键盘遮挡问题官方处理方法KeyboardAvoidingView 曾经给出的解决方式,是使用ScrollView的scrollTo方法,将表单的输入域移动到可见区域(从键盘遮挡处移到键盘上方). 这个方法存在下面问题: 1.移动距离的计算不精确 2.假设表单中有多个Text

ReactNative: 使用输入框TextInput组件

一.简介 一个应用程序中,输入框基本不可或缺,它衍生的搜索功能在很多APP中随处可见.在iOS开发中,使用的输入框组件是UITextView和UITextField,在React-Native中使用的则是TextInput组件.TextInput组件可以通过键盘将文本输入到APP的组件,它提供了如自动校验.占位符.键盘样式.焦点函数等很多丰富的功能. 二.API TextInput组件提供的属性和事件基本能够满足开发需求,既可以使用它做基本的输入功能,也能做列表补全的搜索功能.TextInput

react-native中的网络相关用法.

很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个 REST API 发起 POST 请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容. 使用 Fetch React Native 提供了和 web 标准一致的Fetch API,用于满足开发者访问网络的需求. 发起请求 要从任意地址获取内容的话,只需简单地将网址作为参数传递给 fetch 方法即可(fetch 这个词本身也就是获取的意思): fetch('https://mywebsite.com/mydata.

react-native IOS TextInput长按提示显示为中文(select | selectall -&gt; 选择 | 全选)

根据手机系统语言(简体中文/英文),提示不同的长按效果 长按提示效果图 英文长按提示 中文长按提示 解决 1.手机系统语言为简体中文: 设置->通用->语言与地区 2.ios/项目/info.plist文件中,增加 sorcecode是这样的 <key>CFBundleLocalizations</key> <array> <string>en</string> <string>zh_CN</string> &

React Native 之 TextInput(多个语法知识)

RN中TextInput(输入框)使用总结,RN中文网上写的例子涉及到诸多小的知识点,在此做一一解析. "use strict" import React, { Component } from 'react';import { AppRegistry, // 注册组件,是应用的JS运行入口 Text, // 文本组件(类似于IOS的UILabel) TextInput, View // 视图组件} from 'react-native'; class HelloWorld exten

1. ReactNative 基础

/** 1. reactNative  反应式语言 2. 既拥有原生的用户体验,又保留React的开发效率 3. FaceBook研究 H5,Android,iOS 4. BAT的插件化,热修改  2015/9/15 主流React Native 技术比较有效 Android版本稳定更加火爆 可以使用javaScript和React跨平台开发 learn once,write everywhere(最具有魅力) Web/iOS/Android ->Virtual DOM -> React(JS