主题信息（必填）
主题描述（最多限制在50个字符）
申请人信息（必填）
申请信息已提交审核，请注意查收邮件，我们会尽快给您反馈。
如有疑问，请联系
CSDN &《程序员》编辑/记者，投稿&纠错等事宜请致邮
傻丫头和高科技产物小心翼翼的初恋
如今的编程是一场程序员和上帝的竞赛，程序员要开发出更大更好、傻瓜都会用到软件。而上帝在努力创造出更大更傻的傻瓜。目前为止，上帝是赢的。个人网站：。个人QQ群：、
个人大数据技术博客：
React Native控件文本输入框TextInput组件的相关使用讲解以及模仿实现一下QQ登录界面的效果。5362人阅读
ReactNative（46）
今天把写的RN程序从iOS上迁移到Android上，发现了一些问题，主要涉及到Text和TextInput这两个组件，所以用一节来专门记录下来。
我们先来看官网给的例子：
renderText: function() {
&Text style={styles.baseText}&
&Text style={styles.titleText} onPress={this.onPressTitle}&
{this.state.titleText + '\n\n'}
&Text numberOfLines={5}&
{this.state.bodyText}
var styles = StyleSheet.create({
baseText: {
fontFamily: 'Cochin',
titleText: {
fontSize: 20,
fontWeight: 'bold',
ios allowFontScaling bool&
控制字体是否要根据iOS的“文本大小”辅助选项来进行缩放。
numberOfLines number&
用来当文本过长的时候裁剪文本。包括折叠产生的换行在内，总的行数不会超过这个属性的限制。
onLayout function&
当挂载或者布局变化以后调用，参数为如下的内容：{nativeEvent: {layout: {x, y, width, height}}}
onPress function&
当文本被点击以后调用此回调函数。
color string
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum(&normal&, 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
指定字体的粗细。大多数字体都支持'normal'和'bold'值。并非所有字体都支持所有的数字值。如果某个值不支持，则会自动选择最接近的值。
letterSpacing number
lineHeight number
textAlign enum(&auto&, 'left', 'right', 'center', 'justify')
指定文本的对齐方式。其中'justify'值仅iOS支持。
androidtextAlignVertical enum('auto', 'top', 'bottom', 'center')
ios letterSpacing number
ios textDecorationColor string
textDecorationLine enum(&none&, 'underline', 'line-through', 'underline line-through')
ios textDecorationStyle enum(&solid&, 'double', 'dotted', 'dashed')
ios &writingDirection enum(&auto&, 'ltr', 'rtl')
testID string&
用来在端到端测试中标记这个视图。
ios &suppressHighlighting bool&
当为true时，如果文本被按下，则没有任何视觉效果。默认情况下，文本被按下时会有一个灰色的、椭圆形的高光。
1、在使用Text的过程中，实现文本垂直居中、水平居中的效果（iOS和Android通用）
style={styles.textView}&
&Text style={styles.text}& 水平垂直居中&/Text&
textView:{
flexDirection:'column',
justifyContent:'center',
alignItems:'center',
fontSize:12,
color:'#f2f2f2',
尽量用view去包裹一层Text组件，text组件只负责基础的文字样式，View组件负责对齐方式等。
2、在Android平台上，Text组件里使用paddingLeft 属性，不好使，直接顶着View了。
& & & 解决方式：1）将paddingLeft放在View属性上
& & & & & & & & & & & & 2）将paddingLeft修改为marginLeft
& & & 建议使用第一种方案修改，把对齐方式交给view去处理，Text只负责文本属性的显示。
TextInput组件
我们也来看看官网的api。
&TextInput
style={{height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) =& this.setState({text})}
value={this.state.text}
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（纯数字键盘）。这些值在所有平台都可用：
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属性，这两个属性都不会导致闪烁。
ios & clearButtonMode enum('never', 'while-editing', 'unless-editing', 'always')&
是否要在文本框右侧显示“清除”按钮。
ios & &clearTextOnFocus bool&
如果为true，每次开始输入的时候都会清除文本框的内容。
ios & &enablesReturnKeyAutomatically bool&
如果为true，键盘会在文本框内没有文字的时候禁用确认按钮。默认值为false。
ios & &keyboardAppearance enum('default', 'light', 'dark')&
指定键盘的颜色。
ios & onKeyPress function&
当一个键被按下的时候调用此回调。被按下的键会作为参数传递给回调函数。会在onChange之前调用。
ios & &returnKeyType enum('default', 'go', 'google', 'join', 'next', 'route', 'search', 'send', 'yahoo', 'done', 'emergency-call')
决定“确定”按钮显示的内容。
ios & &selectionState DocumentSelectionState&
参见DocumentSelectionState.js，可以控制一个文档中哪段文字被选中的状态。
android &numberOfLines number&
设置输入框的行数。当multiline设置为true时使用它，可以占据对应的行数。
android &underlineColorAndroid string&
文本框的下划线颜色(译注：如果要去掉文本框的边框，请将此属性设为透明transparent)。
1、在使用TextInput的过程中，在Android平台下，输入框下有个横线，此时需要将属性underlineColorAndroid &设置为transparent来解决。
2、常用的TextInput是作为文本域，譬如最多输入50个字符。
& & & 此时需要设置 &&multiline ={true}
& & & & & & & & & & & & & & & &maxLength ={50}
感觉Text和TextInput组件在Android上的问题比较多，遇到一个解决一个吧。
&&相关文章推荐
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：379548次
积分：4859
积分：4859
排名：第5874名
原创：107篇
转载：103篇
评论：137条
文章：46篇
阅读：187254
(1)(1)(1)(5)(4)(13)(20)(9)(5)(2)(10)(5)(1)(1)(4)(7)(4)(4)(17)(2)(1)(5)(21)(3)(17)(10)(6)(1)(4)(1)(7)(1)(4)(12)(1)react native 的TextInput组件 有属性可以设置单选按钮吗？ - 知乎3被浏览998分享邀请回答0添加评论分享收藏感谢收起0添加评论分享收藏感谢收起当前位置：
& React Native - 文本输入框（TextInput）的使用详解
React Native - 文本输入框（TextInput）的使用详解
发布：hangge
阅读：5440
一、基本介绍
1，TextInput组件介绍
TextInput 组件除了作为输入框实现基本的输入功能外，它还提供了许多其他功能，比如自动校验、占位符以及指定弹出不同的键盘类型等。
2，组件的通用属性
（1）autoCapitalize：首字母自动大写。可选值有：none、sentences、words、characters。
none：不自动变为大写
sentences：将每句话的首字母自动改成大写
words：将每个单词的首字母自动改成大写
characters：将每个英文字母自动改为大写
（2）placeholder：占位符，在输入前显示的文本内容。
（3）value：用来设置 TextInput 组件内字符串的值。
要慎重使用这个属性，因为它有可能会带来屏幕显示闪烁。
官方更推荐使用 editable 属性和 defaultValue 属性来达到相同的效果。
当然如果应用需要突然改变 TextInput 组件内字符串的值，还是需要使用这个属性。
（4）placeholderTextColor：占位符文本的颜色。
（5）password：如果为 true，表示密码输入框。文本显示为“*”
（6）multiline：如果为 true，表示多行输入。
（7）editable：默认为 true。如果设置为 false 表示不可编辑。
（8）autoFocus：如果为 true，则自动获取焦点。
（9）maxLength：能够输入的最长字符数。
（10）returnKeyType：表示软键盘返回键显示的字符串。可选值如下：
跨平台支持的值：done、go、next、search、send
仅 Android 支持的值：none、previous
仅 iOS 支持的值：default、google、join、route、yahoo、emergency-call
（11）keyboardType：定义了当 TextInput 组件获得焦点时，将自动弹出哪种软键盘。可选值如下：
Android、iOS 都支持的：default、numeric、email-address
仅支持 iOS：ascii-capable、numbers-and-punctuation、url、number-pad、phone-pad、name-phone-pad、decimal-pad、twitter、web-search
（12）secureTextEntry：默认为 false。如果为 true，则像密码框一样隐藏输入内容。
（13）autoCorrect：如果为 true，则会自动更正用户输入的英文单词是否正确。（默认值：true）
（14）blurOnSubmit：如果为 true，在输入框输入完成提交是，文本区域会被模糊化。它的默认值是 TextInput 组件 multiline 属性的非值。如果一个 TextInput 组件的 multiline 属性与 blurOnSubmit 都为 true 时，用户按下键盘上的回车键会模糊化输入的文本并触发 onSubmitEditing 事件，而不是在输入区域插入新行。
（15）defaultValue：用来定义 TextInput 组件中的字符串默认值。
（16）selectTextOnFocus：当它为 true 时，如果 TextInput 组件获得焦点，则组件中所有的文字都会被选中。
（17）selection：这个是一个对象类型的属性。它接受的对象结构为：
start: number,
end: number
我们可以用来设置 TextInput 组件中被选择字符的开始与结束位置。
如果把开始位置与结束位置设为同一个值可以达到设置输入光标至该位置的效果。
（18）selectionColor：用来设置被选中文字的高亮显示颜色。在 iOS 平台，还可以使用这个属性设置输入光标的颜色。
3，组件 iOS 平台专有属性
（1）clearButtonMode：表示什么时候会显示清除按钮。可选值有：never、while-editing、unless-editing、always。
（2）clearTextOnFocus：如果为 true，当用户点击 TextInput 组件开始编辑文字时，会自动清除文字区域。
（3）enablesReturnKeyAutomatically：默认为 false。设置为 true 表示没有输入文本时返回键无法使用。
（4）keyboardAppearance：设置不同的键盘颜色。可选值有：default、light、dark，分别表示默认、明亮、偏暗。
4， 组件 Android 平台专有属性
（1）numberOfLines：用来设置 TextInput 组件可以有多少行。
（2）disableFullscreenUI：是否开启全屏文本输入模式。默认为 false。
当为 false 时，如果手机操作系统发现 TextInput 组件的空间小，可能会让用户进入一个全屏文本输入的模式。
当为 true 时，操作系统的这个特性会被关闭，用户只能在 TextInput 组件中进行输入。
（3）inlineImageLeft：它必须是 RN 的 Android 工程中的一个图片资源的名称。RN 将会把这张图片无缩放地显示在 TextInput 组件的左侧。
（4）inlineImagePadding：它定义了 inlineImage（如果有的话）的 padding 与 TextInput 组件自己的 padding。
（5）returnKeyLabel：使用这个属性可以将手机软键盘的回车键设为指定的字符串。这个属性的优先级高于 returnKeyType。
（6）underlineColorAndroid：用来定义输入提示下划线的颜色。如果将它的颜色设为与 TextInput 组件的背景色一样，即可以隐藏输入提示下划线。
5，组件的方法属性
（1）onChange：当文本发生变化时，调用该函数。
它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
（2）onChangeText：当文本发生变化时，调用该函数。
onChangeText 回调函数与上面的 onChange 类似，但它的好处是直接可以接收用户输入的字符串。
（3）onEndEditing：当结束编辑时，调用该函数。
它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
（4）onBlur：失去焦点时触发（在 onEndEditing 之后）。
它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
（5）onFocus：获得焦点时触发。
它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取组件中的字符串（上次输入的，或者是程序设定的默认值）
（6）onSubmitEditing：当结束编辑后，点击键盘的提交按钮触发该事件。
它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。
当我们通过 multiline={true} 将一个 TextInput 组件设置为多行时，要注意：
在 iOS 平台上，这个 TextInput 组件的 onSubmitEditing 事件永远也不会被触发，onSubmitEditing 回调函数也永远不会被执行。
在 Android 平台上，用户每一次按下回车键后，onSubmitEditing 事件都会被触发，但输入框中的字符串会增加一个回车换行，同时输入框会继续保持住焦点，不会失去焦点。
（7）onSelectionChange：当用户在文本输入框中选择的字符串发生改变时触发。
该回调函数会传入一个 event 参数，通过这个参数我们可以得到用户在输入框中选择一段字符串这个事件发生的时间，以及选择的子字符串在输入框中的起点位置与结束位置。
timeStamp: 事件发生时的时间值
nativeEvent: {
selection: {
start: 用户选中的子字符串起点位置
end: 用户选中的子字符串结束位置
当用户移动输入光标时，这个事件也会被触发。比如我们将 TextInput 组件的输入光标移动到最开始位置，那么 event.nativeEvent.selection.start 和 event.nativeEvent.selection.end 的值都是 0。&
（8）onKeyPress（iOS 专有）：当 TextInput 组件获得焦点后，一个按键被按下时，这个回调函数将被调用并被传入按下键的键值。这个函数会在 onChange 回调函数之前被调用。&
（9）onContentSizeChange：当 TextInput 组件的字符行数变化时触发该事件。因此这个回调函数只对多行 TextInput 组件有效，它的参数是一个对象，我们可以从中得到当前 TextInput 组件的新的宽与高。
nativeEvent: {
contentSize: {
width: number,
height: number
（10）onScroll：在 TextInput 组件滚动时会被调用。它的参数是一个对象，我们可以从中得到组件当前滚动的位置。
nativeEvent: {
contentOffset: {
x: number,
（11）onSelectionChange：会在 TextInput 组件的选中字符被改变时调用。它的参数是一个对象，我们可以通过其得到用户选择的字符串。
nativeEvent: {
selection: {
start: number,
end: number
6，组件的成员函数
（1）isFocused()
当得到一个 TextInput 组件的引用后，通过这个方法可以判断当前这个 TextInput 组件是否获得焦点。
this.refs.aTextInputRef.isFocused();
（2）clear()
当得到一个 TextInput 组件的引用后，通过这个方法可以将 TextInput 组件中的字符串清空。
this.refs.aTextInputRef.clear();
二、不同平台上的不同表现
1，高度适配
在 Android 平台上 TextInput 组件可以按照其字体大小自动设置高度，所以 TextInput 组件在 Android 平台上可以不设置组件高度。
而在 iOS 平台上必须要设置组件高度，否则 TextInput 组件将不会显示。
2，输入框下划线
（1）在 Andorid 平台上输入框区域有一条下划线，提示用户这里是一个输入框。
注意：这条下划线默认颜色值时 gray。如果想让这条下划线消失，可以让下划线的颜色与 TextInput 组件的背景色相同，或者让 TextInput 组件的背景色比下划线颜色深。
（2）在 iOS 平台上输入框区域是没有这条下划线的。
3，父组件的 alignItems 键失效
如果我们想让某个组件内的所有子组件都居中对齐，通常可以将该组件 alignItems 样式设置成 center。当如果子组件是 TextInput，那么在不同的平台下表现是不同的。
（1）在 Android 平台下，如果父组件设置了 alignItems:'center'，那么 TextInput 组件是会正确居中对齐的。
（2）但在 iOS 平台下，即使父组件设置了 alignItems:'center'，TextInput 组件仍然是居左对齐。为了让 iOS 平台的 TextInput 组件遵从父组件的对齐规则，需要将 TextInput 组件使用一个没有任何属性的 View 组件包围起来。
&View style={[styles.flex, styles.container]}&
&TextInput style={styles.textInputStyle} defaultValue="欢迎访问 "&
&/TextInput&
三、使用样例
（1）效果图
页面上添加一个 TextInput 用于输入文字，并设置相关的占位符文字以及样式。
当输入框文字改变时，下方 Text 组件会实时统计并显示输入的文字长度。
点击输入框右侧“搜索”按钮，则将输入框内容弹出显示。
（2）样例代码
import React, { Component } from 'react';
AppRegistry,
StyleSheet,
TextInput,
} from 'react-native';
//输入框组件
class Search extends Component {
//构造函数
constructor(props) {
super(props);
this.state = {text: ''};
//组件渲染
render() {
&View style={styles.flex}&
&View style={[styles.flexDirection, styles.inputHeight]}&
&View style={styles.flex}&
&TextInput
style={styles.input}
returnKeyType="search"
placeholder="请输入关键字"
onChangeText={(text) =& this.setState({text})}/&
&View style={styles.btn}&
&Text style={styles.search} onPress={this.search.bind(this)}&搜索&/Text&
&Text style={styles.tip}&已输入{this.state.text.length}个文字&/Text&
//搜索按钮点击
alert("您输入的内容为："+this.state.text);
//默认应用的容器组件
class App extends Component {
render() {
&View style={[styles.flex, styles.topStatus]}&
&Search&&/Search&
//样式定义
const styles = StyleSheet.create({
flexDirection:{
flexDirection:'row'
topStatus:{
marginTop:25,
inputHeight:{
height:45,
height:45,
borderWidth:1,
marginLeft: 5,
paddingLeft:5,
borderColor: '#ccc',
borderRadius: 4
marginLeft:-5,
marginRight:5,
backgroundColor:'#23BEFF',
height:45,
justifyContent:'center',
alignItems: 'center'
color:'#fff',
fontSize:15,
fontWeight:'bold'
marginLeft: 5,
marginTop: 5,
color: '#C0C0C0',
AppRegistry.registerComponent('HelloWorld', () =& App);}