react-native学习笔记之<TextInput>

TextInput

TextInput是一个允许用户在应用中通过键盘输入文本的基本组件。本组件的属性提供了多种特性的配置，譬如自动完成、自动大小写、占位文字，以及多种不同的键盘类型（如纯数字键盘）等等。

TextInput相关的props属性见TextInput.js

由

if (Platform.OS === 'android') {
  var AndroidTextInput = requireNativeComponent('AndroidTextInput',null);
} else if (Platform.OS === 'ios') {
  var RCTTextView = requireNativeComponent('RCTTextView',null);
  var RCTTextField = requireNativeComponent('RCTTextField',null);
}

<AndroidTextInput
        ref="input"
        style={[this.props.style]}
        autoCapitalize={autoCapitalize}
        autoCorrect={this.props.autoCorrect}
        keyboardType={this.props.keyboardType}
        mostRecentEventCount={0}
        multiline={this.props.multiline}
        numberOfLines={this.props.numberOfLines}
        maxLength={this.props.maxLength}
        onFocus={this._onFocus}
        onBlur={this._onBlur}
        onChange={this._onChange}
        onSelectionChange={onSelectionChange}
        onTextInput={this._onTextInput}
        onEndEditing={this.props.onEndEditing}
        onSubmitEditing={this.props.onSubmitEditing}
        blurOnSubmit={this.props.blurOnSubmit}
        onLayout={this.props.onLayout}
        password={this.props.password || this.props.secureTextEntry}
        placeholder={this.props.placeholder}
        placeholderTextColor={this.props.placeholderTextColor}
        selectionColor={this.props.selectionColor}
        text={this._getText()}
        underlineColorAndroid={this.props.underlineColorAndroid}
        children={children}
        editable={this.props.editable}
 />

可知，Android系统中的TextInput调用了组件AndroidTextInput，由AndroidTextInput的this.props及TextInput的PropTypes可知，TextInput有以下props:autoCapitalize,autoCorrect,keyboardType,...

TextInput支持的style见TextStylePropTypes

一个简单的例子：

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

但要注意的是，有一些props必须要在 multiline={true/false}的时候才可用。此外，当`multiline=false`时，应用于单个element的border styles(如`borderBottomColor`,`borderLeftWidth`)将不能使用。如果要实现同样的效果，可以将TextInput包裹在View组件内，如下所示：

<View style={{ borderBottomColor: '#000000',borderBottomWidth: 1,}}>
     <TextInput {...props} />
</View>

KonwnIssues中提到的Text Input Border的问题：

The text input 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.

相关示例：

①

<View style={{ borderBottomColor: '#000000',}}>
     <TextInput />
</View>

结果如图：

②

<View style={{ borderBottomColor: '#000000',}}>
     <TextInput underlineColorAndroid="transparent"/>
</View>

结果如图：

可以看到，加上underlineColorAndroid="transparent"以后TextInput的下划线没了。

----------------------------------------------------我是分割线------------------------------------------------

如果需要输入的是password(输入字符后变成黑点),则需要设置 password={true} 或者secureTextEntry={true}

最终结果：

在此使用了tcomb-form-native库，下一节会具体介绍tcomb-form-native库的使用

react-native学习笔记之<TextInput>

相关文章