React Native - 实现高度自增长的 TextInput 组件

在移动应用开发中，有时希望输入区的高度可以随着输入内容的行数增加而增长。本文演示如何实现这种自增长的 TextInput 组件。

 

1，效果图

（1）默认情况下 TextInput 组件只显示一行的高度。

（2）当用户输入的内容超过 TextInput 组件的高度时，TextInput 组件将会自动变高，把用户的所有输入都显示出来。

           

 

2，样例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65

import React, { Component } from 'react'; import {   AppRegistry,   StyleSheet,   TextInput,   View,   Text } from 'react-native';   //自定义的高度动态调整组件 class AutoExpandingTextInput extends Component {   constructor(props) {     super(props);     this.state = {height:0};   }     _onContentSizeChange(event) {     this.setState({       height: event.nativeEvent.contentSize.height,     });   }     render() {     return (       <TextInput {...this.props} //将自定义组件的所有属性交给TextInput         multiline={true}         onContentSizeChange={this._onContentSizeChange.bind(this)}         style={[styles.textInputStyle, {height: Math.max(35, this.state.height)}]}         value={this.state.text} />     );   } }   export default class Main extends Component {   _onChangeText = (newText) => {     console.log('inputed text：' + newText);   }     render() {    return (     <View style={[styles.container]}>       <AutoExpandingTextInput style={styles.textInputStyle}         onChangeText={this._onChangeText.bind(this)} />     </View>    );   } }   const styles = StyleSheet.create({   container:{      flex:1,      justifyContent:'center',      alignItems:'center',   },   textInputStyle:{     width:300,     height:30,     fontSize:20,     backgroundColor:'#DDFAFF',     paddingTop:0,     paddingBottom:0   }, });   AppRegistry.registerComponent('HelloWorld', () => Main);

原文出自：www.hangge.com  转载请保留原文链接：https://www.hangge.com/blog/cache/detail_1763.html