从零学React Native之11 TextInput

时间:2024-10-22 14:05:50

TextInput 组件是用来通过键盘输入文字,可以使用View组件和Text组件样式,没有自己特定的样式。

与Text组件类似,TextInput组件内部的元素不再使用FlexBox布局,而采用文本布局。详情见上一篇文章从零学React Native之10Text

TextInput属性

只列出了一些常用的,详情见官网

属性名 描述
defaultValue 字符类型,定义TextInput组件中的字符串默认值
autoCorrect 布尔类型,是否自动更正用户输入,默认是true
autoFocus 是否自动获取焦点,默认为false
editable 布尔类型,是否允许修改组件内字符,false代表不能修改
keyboardType 字符串类型,取值包括’default’, ‘email-address’, ‘numeric’, ‘phone-pad’, ( ‘ascii-capable’, ‘numbers-and-punctuation’, ‘url’, ‘number-pad’, ‘name-phone-pad’, ‘decimal-pad’, ‘twitter’, ‘web-search’)括号里的只支持ios平台
MaxLength 数值类型,定义TextInput最多允许用户输入多少个字符
multiline 布尔类型,是否允许多行显示,默认值false
placeholder TextInput无文字的时候显示的提示内容
placeholderTextColor placeholder文字颜色,建议不用修改
secureTextEntry 布尔类型 true按照密码样式显示,默认是false
value 字符串类型,设置TextInput里面的值,目前有可能带来屏幕闪烁,可以用defaultValue临时代替
onSubmitEditing 用户点击提交键的时候调用,如果允许多行显示,该属性失效
onContentSizeChange 内容长度发生变化的时候,只会在多行显示的时候生效
onChangeText 内容长度发生变化的时候调用

下面的例子

class UselessTextInput extends Component {
constructor(props) {
super(props);
this.state = { text: 'Useless Placeholder' };
} render() {
return (
<TextInput
style={{marginTop:100,height: 40, borderColor: 'gray', borderWidth: 1}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}
} // App registration and rendering
AppRegistry.registerComponent('AwesomeProject', () => UselessTextInput);

IOS运行结果:

从零学React Native之11 TextInput

Android运行结果:

从零学React Native之11 TextInput

两个平台不同表现

对比发现 Android端 borderWidth是不生效的,默认有一个输入的线,符合Android设计,Android字体默认很小,我们把上面样式中的height换成fontSize,来看下

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

可以看到Android端字体变大了,但是IOS端没有了

左面是IOS右面Android

从零学React Native之11 TextInput

IOS平台上,没有指定height,TextInput组件不会显示。

一般情况下,我们需要指定FontSize和height,当上下padding为0的时候,height至少是FontSize的1.1倍时Android端才能保证字体完全显示。而默认Android端是有padding的。

如下面的代码可以基本适配两个平台:

    render() {
return (
<TextInput
style={{marginTop:100,
fontSize:30,height:43,
borderColor: 'gray', borderWidth: 1,
paddingBottom:5,paddingTop:5}}
onChangeText={(text) => this.setState({text})}
value={this.state.text}
/>
);
}

TextInput组件的生命周期和回调方法

  1. 当用户点击输入框时,onFocus调用,获取焦点
  2. 当用户输入的时候onChangeText和onChange回调,一般使用onChangeText,里面参数为输入的文本
  3. 当用户按下提交键,onSubmitEditing回调,多行没有提交键
  4. 当组件失去焦点,onEndEditing或onBlur调用,一般情况用onEndEditing就足够了

注意:当点击点击另一个TextInput组件时会触发失去焦点事件,在单行的输入框中按下提交键,Android端不触发失去焦点事件。

最方便的操作就在onChangeText事件中时刻获取用户输入的内容

更多精彩请关注微信公众账号likeDev

从零学React Native之11 TextInput