react-native-custom-textInput

react-native-custom-input,一个自定义的输入组件
The final rendering

Installation:

 npm install --save react-native-custom-input

Example usage:

1.basic

import Input from react-native-custom-input;

   ...
  render() {
    return (
        <Input />
    );
  }

Props:

|Props|Explain|type|require|default|
|:-------|:--------|:--------|:-------|:----------| |label|输入框的名称|string|no|文本输入框|
|value|输入框的值|any|yes|''|
|labelTextStyle|输入框的名称的样式|string|no|{ width: 100,flexDirection: 'row',justifyContent: 'flex-end', alignItems: 'center',marginLeft: 15,}|
|required|是否显示必输标志|boolean|no|false|
|mode|输入框的模式，具体有简单输入框还是输入域|string|no|简单文本输入框，值为（'Input'，'TextArea'）两者之一|
|textInputStyle|输入框的样式|object|no|{fontSize: 14, color: '#332f2b'}|
|isUpdate|是否可编辑，true为可编辑|boolean|no|true|
|suffix|输入框后面的后缀，值得注意的是length大于3的时候将不会显示|string|no|''| |placeholderTextColor|占位符文字的颜色|string|no|'#ccc8c4'|
|autoCapitalize|首字母是否自动大写|string|no|'none'，只能是['characters', 'words', 'sentences', 'none']之一|

注意： 由于输入框组件是在react-native官方组件的基础上进行封装，所以支持TextInput所有属性，在这里就不一一罗列

Examples from props:

...
  _onChange = (label, value) => {
    this.setState({ [label]: value });
  };

  render() {
    return (
      <View style={styles.container}>
        <Text>
          {this.state.result}
        </Text>
        <Input onChange={(value) => this._onChange('input1', value)} value={this.state.input1 || ''} />
        <Input label={'姓名'} onChange={(value) => this._onChange('input2', value)} value={this.state.input2 || ''} />
        <Input onChange={(value) => this._onChange('input3', value)} mode={'TextArea'} label={'详细地址'} value={this.state.input3 || ''} />
      </View>
    );
  }
...

LICENSE:

MIT