React Native - 文本输入框（TextInput）的使用详解

• 要慎重使用这个属性，因为它有可能会带来屏幕显示闪烁。
• 官方更推荐使用 editable 属性和 defaultValue 属性来达到相同的效果。
• 当然如果应用需要突然改变 TextInput 组件内字符串的值，还是需要使用这个属性。

• 跨平台支持的值：done、go、next、search、send
• 仅 Android 支持的值：none、previous
• 仅 iOS 支持的值：default、google、join、route、yahoo、emergency-call

{
  start: number,
  end: number
}

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取用户输入的字符串。

• onChangeText 回调函数与上面的 onChange 类似，但它的好处是直接可以接收用户输入的字符串。

• 它的回调接收一个 event 参数，通过 event.nativeEvent.text 可以获取组件中的字符串（上次输入的，或者是程序设定的默认值）

• 在 iOS 平台上，这个 TextInput 组件的 onSubmitEditing 事件永远也不会被触发，onSubmitEditing 回调函数也永远不会被执行。
• 在 Android 平台上，用户每一次按下回车键后，onSubmitEditing 事件都会被触发，但输入框中的字符串会增加一个回车换行，同时输入框会继续保持住焦点，不会失去焦点。

6，组件的成员函数

this.refs.aTextInputRef.isFocused();

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]}>
  <View>
    <TextInput style={styles.textInputStyle} defaultValue="欢迎访问 hangge.com">
    </TextInput>
  </View>
</View>

三、使用样例

         

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

//输入框组件
class Search extends Component {
  //构造函数
  constructor(props) {
    super(props);
    this.state = {text: ''};
  }

  //组件渲染
  render() {
    return (
      <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>
            <View style={styles.btn}>
              <Text style={styles.search} onPress={this.search.bind(this)}>搜索</Text>
            </View>
          </View>
          <Text style={styles.tip}>已输入{this.state.text.length}个文字</Text>
      </View>
    );
  }

  //搜索按钮点击
  search(){
    alert("您输入的内容为："+this.state.text);
  }
}

//默认应用的容器组件
class App extends Component {
   render() {
      return (
        <View style={[styles.flex, styles.topStatus]}>
         <Search></Search>
        </View>
      );
   }
 }

//样式定义
const styles = StyleSheet.create({
  flex:{
    flex: 1,
  },
  flexDirection:{
    flexDirection:'row'
  },
  topStatus:{
    marginTop:25,
  },
  inputHeight:{
    height:45,
  },
  input:{
    height:45,
    borderWidth:1,
    marginLeft: 5,
    paddingLeft:5,
    borderColor: '#ccc',
    borderRadius: 4
  },
  btn:{
    width:55,
    marginLeft:-5,
    marginRight:5,
    backgroundColor:'#23BEFF',
    height:45,
    justifyContent:'center',
    alignItems: 'center'
  },
  search:{
    color:'#fff',
    fontSize:15,
    fontWeight:'bold'
  },
  tip:{
    marginLeft: 5,
    marginTop: 5,
    color: '#C0C0C0',
  }
});

AppRegistry.registerComponent('HelloWorld', () => App);