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库的使用
原文链接:https://www.f2er.com/react/307010.html