react-native – 如何在文本包装时增加高度？

发布时间：2020-12-15 20:55:20 所属栏目：百科来源：网络整理

导读：我正在尝试创建一个 TextInput当文本换行到下一行时，它可以在高度上增长，类似于Slack的消息输入随着文本一直增长到一个点。我有多行道具设置，所以它是包装，但文档似乎没有提到任何有关包装的事件，我唯一能想到的是一个真正的hacky策略，字符计数，以确

我正在尝试创建一个< TextInput>当文本换行到下一行时，它可以在高度上增长，类似于Slack的消息输入随着文本一直增长到一个点。

我有多行道具设置，所以它是包装，但文档似乎没有提到任何有关包装的事件，我唯一能想到的是一个真正的hacky策略，字符计数，以确定何时增加高度输入。我怎么做到这一点？
https://facebook.github.io/react-native/docs/textinput.html

感谢react-native doc： https://facebook.github.io/react-native/docs/textinput.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}
      />
    );
  }
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!