React Native 富文本封装

import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Dimensions,
    TouchableOpacity,
    TextInput,
    Platform,
    Text
} from 'react-native';
const {width, height} = Dimensions.get('window');

//模块声名并导出
export default class TextInputView extends React.Component {

    //属性声名
    static propTypes = {
        style:React.PropTypes.any,
        inputStyle:React.PropTypes.any,
        maxLength:React.PropTypes.any, // 限制文字长度
        placeholder:React.PropTypes.string,  // 占位文字
        minHeight:React.PropTypes.any,   // 最小高度
        showCount:React.PropTypes.bool


    };
    //默认属性
    static defaultProps = {
        maxLength: 100,
        showCount: true,
        minHeight: defaultMinHeight
    };
    //构造函数
    constructor(props) {
        super(props);
        //状态机变量声明
        this.state = {
            text: '',
        };
    }

    //渲染
    //渲染
    render() {
        return (
            <View style={styles.container}>
                <View style={[styles.inputViewStyle,this.props.style,{minHeight:this.props.minHeight}]}>
                    <TextInput
                        style={[styles.inputTextStyle,this.props.inputStyle,{minHeight:this.props.minHeight}]}
                        placeholder={this.props.placeholder ? this.props.placeholder :'请输入'}
                        multiline={true}
                        paddingVertical={0}
                        selectionColor = {'gray'}
                        textAlignVertical={'top'}
                        placeholderTextColor={'#b2b2b2'}
                        underlineColorAndroid={'transparent'}
                        maxLength={this.props.maxLength}
                        defaultValue = {this.state.text}
                        onChangeText={
                                (text) => {
                                    this.setState({
                                        text: text
                                    })
                                }
                        }
                    />
                    {
                        this.props.showCount ?
                            <Text style={{position: 'absolute', bottom: 5, right: 10, fontSize: 14}}>
                                {this.state.text.length}/{this.props.maxLength}
                            </Text>
                            :
                            null
                    }
                </View>
            </View>
        );
    }
};

const defaultMinHeight = 100

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
    },
    inputViewStyle: {
        width: width - 20,
        minHeight: defaultMinHeight,

        borderWidth: 1,
        borderColor: '#ddd8d8',
        borderRadius: 4,

    },
    inputTextStyle: {
        fontSize: 14,
        color: '#666666',
        width: '100%',
        minHeight: defaultMinHeight,
        padding: 10,
        paddingBottom: 30,
        paddingTop: 10
    }
});

使用：

<TextInputView
      style={{marginTop: 64,marginBottom: 10}}
      placeholder="请您在此描述问题"
      minHeight={100} // 最小高度,默认为100
      maxLength={500} // 最大长度,默认为100
      onChangeText={(text)=>{this.setState({remarkText: text});}}
      showCount={true} // 展示剩余文字, 默认为true
/>

效果如图：