☰

どのように成長するか テキストの折り返し時に高さは？質問する

tag-icon • tag-icon react-native
どのように成長するか テキストの折り返し時に高さは？質問する

<TextInput>Slack のメッセージ入力がテキストに合わせて一定位置まで拡大するのと同様に、テキストが次の行に折り返されたときに高さが拡大できる を作成しようとしています。

スラック入力

プロパティを設定しているmultilineので、ラッピングは行われていますが、ドキュメントにはラッピングに関するイベントについては何も記載されていないようです。私が考えられる唯一の方法は、入力の高さを増やすタイミングを判断するために文字数をカウントするという非常にハッキーな戦略です。どうすればこれを実現できますか?https://facebook.github.io/react-native/docs/textinput.html

ベストアンサー1

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 以上: (Nicolas de Chevigné による説明)

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, {height: Math.max(35, this.state.height)}]}
        value={this.state.text}
      />
    );
  }
}

おすすめ記事