欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

react-native自定义文本输入框

程序员文章站 2022-05-29 22:19:52
...

react-native-custom-textInput

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

The final rendering

react-native自定义文本输入框

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>
    );
  }
...

实现代码:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  TextInput,
  View,
  Text,
  StyleSheet,
} from 'react-native';

const styles = StyleSheet.create({
  center: {
    justifyContent: 'center',
    alignItems: 'center'
  }
});

class Input extends Component {
  static propTypes = {
    inputStyle: TextInput.propTypes.style,
    labelTextStyle: TextInput.propTypes.style,
    placeholderTextColor: PropTypes.string,
    isUpdate: PropTypes.bool,
    readonly: PropTypes.bool,
    textInputStyle: TextInput.propTypes.style,
    autoCapitalize: PropTypes.oneOf(['characters', 'words', 'sentences', 'none']),
    label: PropTypes.string,
    placeholder: PropTypes.string,
  };

  static defaultProps = {
    placeholderTextColor: '#ccc8c4',
    autoCapitalize: 'none',
    isUpdate: true,
    readonly: false,
    label: '文本输入框',
    placeholder: '请输入'
  };

  constructor(props) {
    super(props);
    this.state = {
      value: props.value || '',
      textAlign: 'right'
    };
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.value !== this.state.value) {
      this.setState({ value: nextProps.value });
    }
  }

  _onChangeText = (val) => {
    this.setState({ value: val });
    this.props.onChange && this.props.onChange(val.replace(/(^\s*)|(\s*$)/g, ''));
  };

  _onBlur = (e) => {
    const { onBlur } = this.props;
    onBlur && onBlur(e);
    this.setState({
      textAlign: 'right'
    });
  };

  _onFocus = (e) => {
    const { onFocus } = this.props;
    onFocus && onFocus(e);
    this.setState({
      textAlign: 'left'
    });
  };

  _renderInputContent = () => {
    const { textInputStyle, placeholderTextColor, autoCapitalize, isUpdate, suffix } = this.props;
    return (
      isUpdate ?
        <View
          style={[{ flexDirection: 'row', flex: 1, height: '100%' }, styles.center]}
        >
          <TextInput
            {...this.props}
            onChangeText={this._onChangeText}
            onBlur={this._onBlur}
            onFocus={this._onFocus}
            style={[{ textAlign: (this.state.value === 0 || this.state.value) ?
              this.state.textAlign : 'left', flex: 1, fontSize: 14, color: '#332f2b' }, textInputStyle]}
            placeholderTextColor={placeholderTextColor}
            value={String(this.state.value)}
            autoCorrect={false}
            autoCapitalize={autoCapitalize}
            underlineColorAndroid="transparent"
          />
          <Text style={{ marginRight: 10 }}>
            {(suffix && suffix.length > 3) ? '' : suffix}
          </Text>
        </View>
        :
        <View
          style={[{ flexDirection: 'row', flex: 1, height: '100%', backgroundColor: '#f7f6f5' }, styles.center]}
        >
          <Text
            style={{ textAlign: this.state.value ? this.state.textAlign : 'left', flex: 1 }}
          >
            {this.state.value}
          </Text>
          <Text style={{ marginRight: 10 }}>
            {(suffix && suffix.length > 3) ? '' : suffix}
          </Text>
        </View>
    );
  };

  _renderTextAreaContent = () => {
    const { textInputStyle, placeholderTextColor, autoCapitalize, isUpdate } = this.props;
    return (
      isUpdate ?
        <TextInput
          numberOfLines={4}
          {...this.props}
          multiline={true}
          onChangeText={this._onChangeText}
          onBlur={this._onBlur}
          onFocus={this._onFocus}
          style={[{ marginVertical: 5, height: 60, marginHorizontal: 10, textAlign: 'left', flex: 1, },
            textInputStyle,
          ]}
          placeholderTextColor={placeholderTextColor}
          value={String(this.state.value)}
          autoCorrect={false}
          autoCapitalize={autoCapitalize}
          underlineColorAndroid="transparent"
        /> :
        <Text
          style={[{ marginVertical: 5, height: 60, marginHorizontal: 10, textAlign: 'left', flex: 1,
            backgroundColor: '#f7f6f5', }, textInputStyle]}
        >{this.state.value}
        </Text>
    );
  };

  render() {
    const { label, labelTextStyle, required, mode } = this.props;
    if (mode === 'TextArea') {
      return (
        <View
          style={{
            height: 108,
            width: '100%',
            paddingVertical: 10,
            paddingHorizontal: 15,
            borderColor: '#eae6e4',
            marginVertical: 5,
            borderBottomWidth: 0.5,
            backgroundColor: '#fff'
          }}
        >
          <Text style={[{ fontSize: 15 }, labelTextStyle]}>
            {label}{ required ? <Text style={{ fontSize: 16, fontWeight: 'bold', color: '#F00' }}>*</Text> : null }
          </Text>
          { this._renderTextAreaContent() }
        </View>
      );
    }
    return (
      <View
        style={[{
          height: 36,
          width: '100%',
          backgroundColor: '#fff',
          flexDirection: 'row',
          borderColor: '#eae6e4',
          borderBottomWidth: 0.5,
        }, styles.center]}
      >
        <Text style={[
          {
            width: 100,
            flexDirection: 'row',
            justifyContent: 'flex-end',
            alignItems: 'center',
            marginLeft: 15,
            fontSize: 14,
            color: '#514b46'
          },
          labelTextStyle,
        ]}
        >{label}
          { required ? <Text style={{ fontSize: 16, fontWeight: 'bold', color: '#F00' }}>*</Text> : null }
        </Text>
        { this._renderInputContent() }
      </View>
    );
  }
}

export default Input;
相关标签: react