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

由

var TextStylePropTypes = Object.assign(Object.create(ViewStylePropTypes), {
  color: ColorPropType,
  fontFamily: ReactPropTypes.string,
  fontSize: ReactPropTypes.number,
  fontStyle: ReactPropTypes.oneOf(['normal', 'italic']),
  /**
   * Specifies font weight. The values 'normal' and 'bold' are supported for
   * most fonts. Not all fonts have a variant for each of the numeric values,
   * in that case the closest one is chosen.
   */
  fontWeight: ReactPropTypes.oneOf(
    ['normal' /*default*/, 'bold',
     '100', '200', '300', '400', '500', '600', '700', '800', '900']
  ),
  textShadowOffset: ReactPropTypes.shape(
    {width: ReactPropTypes.number, height: ReactPropTypes.number}
  ),
  textShadowRadius: ReactPropTypes.number,
  textShadowColor: ColorPropType,
  /**
   * @platform ios
   */
  letterSpacing: ReactPropTypes.number,
  lineHeight: ReactPropTypes.number,
  /**
   * Specifies text alignment. The value 'justify' is only supported on iOS.
   */
  textAlign: ReactPropTypes.oneOf(
    ['auto' /*default*/, 'left', 'right', 'center', 'justify']
  ),
  /**
   * @platform android
   */
  textAlignVertical: ReactPropTypes.oneOf(
    ['auto' /*default*/, 'top', 'bottom', 'center']
  ),
  /**
   * @platform ios
   */
  textDecorationLine: ReactPropTypes.oneOf(
    ['none' /*default*/, 'underline', 'line-through', 'underline line-through']
  ),
  /**
   * @platform ios
   */
  textDecorationStyle: ReactPropTypes.oneOf(
    ['solid' /*default*/, 'double', 'dotted','dashed']
  ),
  /**
   * @platform ios
   */
  textDecorationColor: ColorPropType,
  /**
   * @platform ios
   */
  writingDirection: ReactPropTypes.oneOf(
    ['auto' /*default*/, 'ltr', 'rtl']
  ),
});

可知，View有的style,Text以及TextInput也有。

一个简单的例子：

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

相关问题: ①[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', borderBottomWidth: 1, }}>
     <TextInput />
</View>

结果如图：

②

<View style={{ borderBottomColor: '#000000', borderBottomWidth: 1, }}>
     <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库的使用