ReactNative TextInput控件的属性和样式

属性

autoCapitalize:

首字母自动大写。可选值有:

  • none
  • sentences
  • words
  • characters。

placeholder:

占位符,在输入前显示的文本内容。

value:

文本输入框的默认值。

placeholderTextColor:

占位符文本的颜色。

password:

如果为 true,表示密码输入框。文本显示为“*”

multiline:

如果为 true,表示多行输入。

editable:

默认为 true。如果设置为false表示不可编辑。

autoFocus:

如果为 true,则自动获取焦点。

clearButtonMode:

表示什么时候会显示清除按钮。可选值有:

  • never
  • while-editing
  • unless-editing
  • always。

maxLength:

能够输入的最长字符数。

enablesReturnKeyAutomatically:

默认为 false。设置为true表示没有输入文本时返回键无法使用。

returnKeyType:

表示软键盘返回键显示的字符串。可选值为:

  • default
  • go
  • google
  • join
  • next
  • route
  • search
  • send
  • yahoo
  • done
  • emergency-call。

secureTextEntry:

默认为 false。如果为true,则像密码框一样隐藏输入内容。

方法

onChange:

当文本发生变化时,调用该函数。

onEndEditing:

当结束编辑时,调用该函数。

onBlur:

失去焦点时触发。

onFocus:

获得焦点时触发。

onSubmitEditing:

当结束编辑后,点击键盘的提交按钮触发该事件。

样式

color

字体颜色

fontSize

字体大小

fontStyle

字体风格

  • normal
  • italic

fontWeight

字体粗细权重

  • normal
  • bold:100、200、300、400、500、600、700、800、900

lineHeight

行高

textAlign

文本对齐方法

  • auto
  • left
  • right
  • center
  • justify:只支持iOS,在Android上会自动回退到left

textDecorationLine

横线位置

  • none
  • underline
  • line-through
  • underline line-through

textShadowColor

阴影效果颜色

textShadowOffset

设置阴影效果:{width:number,height:number}

textShadowRadius

阴影效果圆角

selectionColor

当文本被选中时突出显示的颜色 ( 只支持Android

textAlignVertical

文本垂直对齐方式( 只支持Android

  • auto
  • top
  • bottom
  • center

textBreakStrategy

英文文本的分段策略( 只支持Android

  • simple
  • highQuality(默认值)
  • balanced

letterSpacing

字符间距( 只支持iOS

textDecorationColor

文本装饰线条的颜色( 只支持iOS

textDecorationStyle

文本装饰线条的风格( 只支持iOS

  • solid
  • double
  • dotted
  • dashed

writingDirection

文本方向( 只支持iOS

  • auto
  • ltr
  • rtl

includeFontPadding

文本是否包含顶部和底部额外空白( 只支持Android

fontFamily

字体名称,。它的取值有:

  • serif:该字体族在字的笔画开始及结束的地方有额外的装饰,而笔画的粗细会因横直地不同而有所不同。
  • sans-serif:该字体族没有额外的装饰,笔画粗细大致差不多。
  • monospace:由于打字机的出现,又独立出了这种等宽字体种类。
  • 以及延伸出来的:sans-serif-light、sans-serif-thin、sans-serif-condensed、sans-serif-medium

你可能感兴趣的:(React,Native)