web-dev-qa-db-fra.com

Comment pourrais-je augmenter la hauteur de <TextInput> lors de l'habillage du texte?

J'essaie de créer un <TextInput> qui peut croître en hauteur lorsque le texte passe à la ligne suivante, de la même manière que l'entrée de message de Slack grandit avec le texte jusqu'à un point.

Slack input

J'ai un ensemble d'accessoires multiline, donc il enveloppe, mais la documentation ne semble mentionner aucun événement concernant l'emballage, et la seule chose à laquelle je peux penser est une stratégie vraiment fastidieuse pour compter le nombre de personnages à comprendre quand augmenter la hauteur du contribution. Comment pourrais-je accomplir cela? https://facebook.github.io/react-native/docs/textinput.html

react-native
28
Ryan McDermott

Merci à la documentation réactive: https://facebook.github.io/react-native/docs/textinput.html

Vous pouvez faire quelque chose comme ça: 

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 ou supérieur: (comme expliqué par 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}
      />
    );
  }
}
39
Jérémy Magrin

Depuis React Native 0.46.1 :

La propriété contentSize a été supprimée de l'événement TextInput.onChange

Si vous utilisez cette version, vous pouvez utiliser onContentSizeChange prop

De la réponse de Jérémy , nous avons

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}
      />
    );
  }
}
29
Nicolas de Chevigné

Vous devriez simplement définir une propriété maxHeight dans la style:

<TextInput multiline style={{maxHeight: 80}} />

Démo ici: https://snack.expo.io/@yairopro/multiline-input-with-max-height

12
Yairopro

Ma réponse est d'utiliser les accessoires onContentSizeChange et numberOfLines dans TextInput, bien sûr, activez multiline, voici ma solution:

let numOfLinesCompany = 0;
<TextInput
     ...
     multiline={true}
     numberOfLines={numOfLinesCompany}
     onContentSizeChange={(e) => {
         numOfLinesCompany = e.nativeEvent.contentSize.height / 18;
     }}
/>

18 est la hauteur du texte, dépend probablement de fontSize

0
Tuan Dat Tran