React Native - 实现高度自增长的 TextInput 组件
作者:hangge | 2017-09-13 08:10
在移动应用开发中,有时希望输入区的高度可以随着输入内容的行数增加而增长。本文演示如何实现这种自增长的 TextInput 组件。
1,效果图
(1)默认情况下 TextInput 组件只显示一行的高度。
(2)当用户输入的内容超过 TextInput 组件的高度时,TextInput 组件将会自动变高,把用户的所有输入都显示出来。
2,样例代码
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);
全部评论(0)