我正在尝试创建一个< TextInput>当文本换行到下一行时，它可以在高度上增长，类似于Slack的消息输入随着文本一直增长到一个点。
我有多行道具设置，所以它是包装，但文档似乎没有提到任何有关包装的事件，我唯一能想到的是一个真正的hacky策略，字符计数，以确定何时增加高度输入。我怎么做到这一点？
https://facebook.github.io/react-native/docs/textinput.html
感谢react-native doc：
https://facebook.github.io/react-native/docs/textinput.html
原文链接：https://www.f2er.com/react/301324.html你可以这样做：
class AutoExpandingTextInput extends React.Component {
state: any;
constructor(props) {
super(props);
this.state = {text: '',height: 0};
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onChange={(event) => {
this.setState({
text: event.nativeEvent.text,height: event.nativeEvent.contentSize.height,});
}}
style={[styles.default,{height: Math.max(35,this.state.height)}]}
value={this.state.text}
/>
);
}
}
0.46.1或更高:(由NicolasdeChevigné解释)
class AutoExpandingTextInput extends React.Component {
constructor(props) {
super(props);
this.state = {text: '',height: 0};
}
render() {
return (
<TextInput
{...this.props}
multiline={true}
onChangeText={(text) => {
this.setState({ text })
}}
onContentSizeChange={(event) => {
this.setState({ height: event.nativeEvent.contentSize.height })
}}
style={[styles.default,this.state.height)}]}
value={this.state.text}
/>
);
}
}
