[React Native]高度自增长的TextInput组件-白红宇

之前我们学习了了解了TextInput相关的属性。

在开发中,我们有时候有这样的需求, 希望输入区域的高度随着输入内容的长度而增长, 如下：

这时候我们需要自定义一个组件：在项目中创建AutoExpandingTextInput.js

import React, {Component} from 'react';import {AppRegistry, TextInput, StyleSheet} from 'react-native';export default class AutoExpandingTextInput extends Component {    // 构造    constructor(props) {        super(props);        // 初始状态        this.state = {            text: '',            height: 0        };        this.onChange = this.onChange.bind(this);    }    onChange(event) {        console.log(event.nativeEvent);        this.setState({            text: event.nativeEvent.text,            height:event.nativeEvent.contentSize.height        });    }    onContentSizeChange(params){        console.log(params);    }    render() {        return (            
            );    }}const styles = StyleSheet.create({    textInputStyle: { //文本输入组件样式        width: 300,        height: 30,        fontSize: 20,        paddingTop: 0,        paddingBottom: 0,        backgroundColor: "grey"    }});复制代码

在多行输入(multiline={true})的时候，可以通过onChange回调函数,获取内容的高度event.nativeEvent.contentSize.height，然后修改内容的高度。

接下来修改index.ios.js或者index.android.js 如下:

import AutoExpandingTextInput from './AutoExpandingTextInput';class AwesomeProject extends Component {    _onChangeText(newText) {        console.log('inputed text:' + newText);    }    render() {        return (            
                    
                 
            );    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: '#F5FCFF',        borderWidth: 1,        justifyContent: 'center',        alignItems: 'center'    },    textInputStyle: { //文本输入组件样式        width: 300,        height: 50,        fontSize: 20,        paddingTop: 0,        paddingBottom: 0,        backgroundColor: "grey"    }});复制代码

当然我们知道在IOS端TextInput/Text组件默认不会水平居中的,需要在外层额外嵌套一层View,可以参考运行结果:

更多精彩请关注微信公众账号likeDev,公众账号名称：爱上Android。