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}
/>

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

相关问题: ①[Android][TextInput] Remove underline option ②KonwnIssues ③react-native-textinput-border-not-working④tcomb-form-native-issue

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}

相关问题：How do you style a TextInput in react native for password input

最终结果：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!