React Native控件之TextInput组件介绍以及实际登录界面实现

最新推荐文章于 2024-07-30 10:28:58 发布

黔北iOSer

最新推荐文章于 2024-07-30 10:28:58 发布

阅读量1.2w

点赞数 1

分类专栏： React Native专题学习

本文链接：https://blog.csdn.net/u014484863/article/details/51732074

版权

本文介绍了React Native中的TextInput组件，用于用户文本输入，并展示了如何实现贵州银行登录界面。文章详细讲解了组件的基本使用，包括设置边框样式、监听事件如onChangeText。此外，还讨论了isFocused()和clear()两个方法，前者检查组件是否聚焦，后者清除输入内容。通过示例代码，演示了多行文本输入、自动获取焦点及禁用输入等功能。

摘要由CSDN通过智能技术生成

React Native控件之TextInput组件介绍以及实际登录界面实现

（一）前言

这一篇文章讲解一下文本输入框TextInput组件使用讲解以及模仿实现一下贵州银行登录界面效果。

TextInput组件允许用户在应用中通过键盘进行输入文本信息。并且该组件还提供了多种配置属性：自动拼写修复、自动大小写切换、占位默认字符设置以及多种不同类型的键盘切换（数字键盘与字母键盘等之间的切换）。

（二）基本使用

TextInput组件和前面讲到的Image或者 Text组件差不多，用起来都很simple。我们直接在应用中添加一个TextInput组件，然后给该组件添加相关属性（例如：边框颜色、粗细、背景、默认值）以及监听方法（例如：刚输入回调、输入完成回调、焦点变化等事件）。看一下官方例子：

   <View style={styles.TextInputContainer}>
                  <TextInput style={
   {
   borderWidth:1,borderColor:'red',height:40}}
                      onChangeText={
      (text) => this.setState({text}) }
                      value={this.state.text}
                  />
               </View>


TextInputContainer:{
    marginTop:20,
    marginLeft:10,
    marginRight:10,
    backgroundColor:'white'
  },

这个例子直接定义了TextInput组件，同时设置组件的风格、高度、边框粗细以及边框颜色。而且，我们监听了TextInput的onChangeText事件来获取用户输入信息。还有其他监听事件，例如onSubmitEditing（提交编辑）、onFoucs（输入框获取焦点的时候调用）等相关的监听方法。

接下来我们进一步将例子加深：创建三个TextInput，同时每个TextInput都添加了默认值，第一个TextInput组件设置高度40，边框粗细和边框的颜色，而且可以输入多行信息。第二个TextInput设置左右额外边距以及自动获取焦点。第三个TextInput设置不可输入状态。直接上代码：