rn-project/src/components/textarea.js

#### 项目介绍 类似一个脚手架的工具 此项目致力于构建一套基础，简单，可维护的 适配我司的react-native项目。可在此基础上搭建项目，封装了基础架构，基础组件，以及各种交互等；可快速进行项目搭建，开发。 # 涉及主要技术 - 1. 项目主要架构 * react native * react-navigation * redux

'use strict';

import React, { Component } from 'react';
import { View, Text, StyleSheet, TextInput } from 'react-native';
import BaseStyle from '../constants/Style';
import PropTypes from 'prop-types';
import ViewUtil from '../utils/View';

/**
 * 使用方法
 * 
 * 
   <Radio
            checked={this.state.checked}
            color={"#31bcfe"}
            size={20}
            onPress={() => {
              this.setState({
                checked: !this.state.checked
              })
            }}
          />

 */

export default class Textarea extends Component {
  static defaultProps = {
    editable: true, //如果为fals文本不可编辑
    placeholder: '请输入...',
    placeholderTextColor: '#ccc',
    inputLength: 0,
    isShowBottom: true,
    textareaStyle: {},
    textViewStyle: {},
  };
  static propTypes = {
    editable: PropTypes.bool, //是否可编辑
    maxLength: PropTypes.number, //最大长度
    isShowBottom: PropTypes.bool, //是否显示底部的输入字数
    textareaStyle: PropTypes.object, //tearea的样式
    textViewStyle: PropTypes.object, //teareaView的样式
    placeholder: PropTypes.placeholder,
    placeholderTextColor: PropTypes.placeholderTextColor,
    inputLength: PropTypes.number, //输入的字符串长度
    keyboardType: PropTypes.string,
    returnKeyType: PropTypes.string,
    autoFocus: PropTypes.bool,
    caretHidden: PropTypes.bool,
    secureTextEntry: PropTypes.bool,
    defaultValue: PropTypes.string,
    onChange: PropTypes.func,
    onBlur: PropTypes.func,
    onChangeText: PropTypes.func,
    onFocus: PropTypes.func,
  };

  constructor(props) {
    super(props);
  }

  render() {
    const {
      inputLength,
      isShowBottom,
      textViewStyle,
      textareaStyle,
      editable,
      maxLength,
      placeholder,
      placeholderTextColor,
      keyboardType,
      returnKeyType,
      autoFocus,
      caretHidden,
      secureTextEntry,
      defaultValue,
      onChange,
      onBlur,
      onChangeText,
      onFocus,
    } = this.props;

    return (
      <View>
        <View style={[styles.textViewStyle, textViewStyle]}>
          <TextInput
            style={[styles.textInputStyle, textareaStyle]}
            underlineColorAndroid="transparent"
            keyboardType={keyboardType}
            maxLength={maxLength}
            returnKeyType={returnKeyType}
            placeholder={placeholder}
            placeholderTextColor={placeholderTextColor}
            editable={editable}
            autoFocus={autoFocus}
            caretHidden={caretHidden}
            secureTextEntry={secureTextEntry}
            defaultValue={defaultValue}
            multiline={true}
            onChange={onChange}
            onBlur={onBlur}
            onChangeText={onChangeText}
            onFocus={onFocus}
          />
        </View>
        {isShowBottom ? (
          <View style={styles.bottomLimitView}>
            <Text style={styles.bottomText}>
              {inputLength}/{maxLength}
            </Text>
          </View>
        ) : null}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  textViewStyle: {
    ...BaseStyle.row,
    ...BaseStyle.alignItemsCenter,
    marginLeft:15,
    marginRight:15,
    // borderWidth: 1,
    // borderColor: '#fafafa',
    
  },
  textInputStyle: {
    flex:1,
    fontSize: 14,
    color: '#333333',
    width: ViewUtil.size.width-10,
    minHeight: 200,
    lineHeight: 20,
    paddingLeft:5,
    paddingRight:5,
    textAlign: 'left',
    // backgroundColor:"red"
  },
  bottomLimitView: {
    ...BaseStyle.row,
    justifyContent: 'flex-end',
    marginTop: 10,
    marginRight: 15,
  },
  bottomText: {
    fontSize: 14,
    color: '#bbbbbb',
  },
});