React Native 学习笔记（七）--TextInput组件

Part One

回顾

前面我们了解了React Native，从环境搭建到属性和状态机以及布局和样式。现在对于我们来说搭接面应该是不会有什么问题的，遇见不熟悉的样式大家可以看一下W3CSchool看一下如何使用。有了上面的基础，我们接下来就可以熟悉一下RN为我们提供的一些组件了。其实在此之前我们也接触了一些组件，比如：View、Text、Image等组件（在学习Props和State的时候我们简单的学了一点）。
接下来我们就来学习一下新的组件

Part Two

新组件TextInput

TextInput，在Andtoid中相当于EditText , 让用户输入一些信息，它有一个属性，名为onChangeText，属性值是一个函数，在Android中就是相当于给EditText设置一个监听回调。
下面我们看一下它及其属性的使用：

import React, { Component } from 'react';
import { AppRegistry, Text, TextInput, View } from 'react-native';

class TextInputComponent extends Component {
    constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  render() {
    return (
      <View style={{padding: 10}}>
        <Text style={{padding: 10, fontSize: 6}}>
        // 使用onChangeText属性，这个属性的值是一个函数，=> 这个标志是ECMAScript 6的新语法，不了解的可以自行查找一下资料
        // setState()方法会通知界面重新渲染，里面的参数代表的是构造函数中的state----text
        // 下面的两种方式都是可以的，第一种方式只是为了让大家回顾一下ECMAScript 6中的一些知识，有兴趣的可以试试别的方式，比如使用function
        // onChangeText={(text1) => this.setState({text: text1})}
        </Text>
        <TextInput
          style={{height: 60}}
          placeholder="Type here to translate!"
          onChangeText={(text) => this.setState({text: text})}
        />
        <Text style={{padding: 10, fontSize: 6}}>
          // 我们来看一下下面的几个需要注意的地方
          // 1、在JavaScript中字符串的split()方法返回的是一个数组，并且这个数组的长度不会为零（即便这个字符串的长度为零）
          // 2、数组的map()方法相当于Java中的for循环或foreach，参数是一个函数，返回值类型还是一个数组
          // 3、=> 符号，代表一个函数，左边括号中代表的是函数的参数，右边代表的是这个函数的函数体返回的东西
          // 4、join()方法是数组的转字符串的一个方法，比如[1,2,3].join('0')的结果就是 字符串102030
        </Text>
        <Text style={{padding: 10, fontSize: 12}}>
          {this.state.text.split(' ').map((word) => word && '��').join(' ')}
        </Text>

        <Text style={{padding: 10, fontSize: 12}}>
          {''.split(' ').length} // 显示的是 1
        </Text>

        <Text style={{padding: 10, fontSize: 6}}>
            // 显示当前输入了几个单词（按照英文的格式，空格代表一个单词的结束），连续按几个空格试试？
        </Text>
        <Text style={{padding: 10, fontSize: 12}}>
          {this.state.text.split(' ').length - 1 + "个word"}  
        </Text>

        <Text style={{padding: 10, fontSize: 12}}>
          {'1  1'.split(' ').join("0")}
        </Text>
      </View>
    );
  }
}

AppRegistry.registerComponent('TextInputComponent', () => TextInputComponent);

在Text组件中包含的都是可现实的内容，所以上面的注释内容我都放在Text组件中了，所以如果大家在部署项目的时候，如果觉的不方便观察可以把注释部分的Text删除掉。
上面的注释解释的也比较清楚，大家可以看一下注释，有疑问的可以发表评论提出问题，大家探讨。里面JavaScript相关的也可以相互交流。

Part Three

运行结果

其他的属性和方法

TextInput组价提供了很多属性供开发人员使用，比如自动完成、自动大小写、键盘类型、行数、占位文字（也就是提示文字）等等属性；方法有isFocused()、clear()等。下面我们就来学习和掌握一些常用的属性和方法，其他的大家可以通过官网去学习和使用。

学习属性和方法之前我们先看一下官网中有关TextInput组件的说明：
TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.
大致意思是：组件有一个默认的底部边框并且底部边框的padding是由手机系统提供的背景图片决定的，不能直接被更改。解决方案是：1、我们别设定组件的高度让系统自己去分配高度；2、通过设置underlineColorAndroid为透明的来解决。

Note that on Android performing text selection in input can change app’s activity windowSoftInputMode param to adjustResize. This may cause issues with components that have position: ‘absolute’ while keyboard is active. To avoid this behavior either specify windowSoftInputMode in AndroidManifest.xml ( https://developer.android.com/guide/topics/manifest/activity-element.html ) or control this param programmatically with native code.
大致意思就是要合理的解决软键盘挡住输入框的问题，这个问题在开发中还是比较常见的，加之有些手机又有虚拟键，一般的解决方案是在清单文件中设置windowSoftInputMode的值（这个好像有9种属性值，有兴趣的可以查查看）。

常用属性：autoCapitalize

用于控制TextInput是否要自动将特定的字符切换为大写，属性值有四个，默认为sentence：每句话的第一个字符大写。下面是属性值的介绍;

characters: 所有字符全部大写
words: 每个单词的首字母大写
sentences: 每句话的第一个字符大写
none: 不自动切换，用户输入什么样就是什么样

常用属性：autoCorrect

属性值为Boolean类型
true：代表启动拼写检查并自动修正
false：代表关闭自动修正

上面的这两个属性我使用了之后发现在华为meta8手机上没有任何效果，在RN的讨论社区中也发帖了，大家还在讨论中，有结果了我会回来更新一下，至于其他手机还请大家自行测试。

常用属性：defaultValue & placeholder

用于指定默认显示的内容，一般用于提示用户

常用属性：editable

是否可编辑，为false时不可编辑

常用属性：keyboardType

键盘类型，属性值如下：
default 输入法默认的类型
numeric 纯数字类型
email-address 电子邮件
ascii-capable ABSII 表 相关的键盘 这个要看手机的输入法是否支持，不支持就没有效果

Part Four

资料

W3CSchool官网
ReactNative中处理文本输入
官网–TextInput组件