Erstellen eines mehrzeiligen TextInput mit React-Native

Arbeite ich an einem reagieren native app und brauchen eine TextInput-Komponente mit ähnlicher Funktionalität wie die textview in der "Nachrichten" - app auf iOS—es sollte zunächst als eine Zeile und dann elegant zu erweitern, um mehr Zeilen, bis etwas einzugrenzen (wie 5 Zeilen text) und dann starten, scrollen entlang, um die Letzte Zeile wie nötig.

Warf einen Blick auf die SlackTextViewController aber a) scheint, wie es eine Menge Sachen, die ich nicht will und b) ich möchte versuchen, so viel code in Reagieren (und aus objective-C/swift) wie möglich.

Edit: möchte Nur betonen, dass ich lieber REAGIEREN (JAVASCRIPT -) code, wie oben angegeben, statt in Objective-C oder Swift.

Kommentar zu dem Problem
Überprüfen Sie diese Bibliothek aus, es wurde nicht aktualisiert, für eine Weile, aber es funktioniert ziemlich gut. github.com/HansPinckaers/GrowingTextView Kommentarautor: sbarow

InformationsquelleAutor der Frage Aaron Yodaiken | 2015-07-17

  1. 19

    Ich versucht, zwei verschiedene Möglichkeiten, dies zu tun heute. Weder sind die beste, aber ich dachte, ich würde aufzeichnen, meine Bemühungen, falls Sie hilfreich sind. Sie beide auf jeden Fall hatte die Wirkung, die Sie suchen, aber irgendwann verzögert mit allen asynchronen Kommunikation.

    1) Offscreen Text Höhe

    Also nur unter der TextInput Hinzugefügt habe ich einen normalen Text-Feld mit dem gleichen font und padding und so. Ich habe mich registriert, die onChange Hörer am Eingang und rief setState({text: event.nativeEvent.text}). Der Text eingereicht, hat seinen Wert aus dem Zustand. Beide hatten onLayout Zuhörer. Im Grunde, war das Ziel, um die Höhe für die TextInput-von der (uneingeschränkten) Text. Dann versteckte ich den Text Weg offscreen

    https://gist.github.com/bleonard/f7d748e89ad2a485ec34

    2) Native Modul

    Wirklich, ich brauchte nur die Höhe des Inhalts in der real UITextView. Also ich habe eine Kategorie aus, um RCTUIManager, da es mehrere Methoden gibt es bereits, die hilfreich sind. Ich entledigte sich die verborgenen Text anzeigen. So onChange Frage ich nach der Höhe und Verwendung, in gleicher Weise über den Staat.

    https://gist.github.com/bleonard/6770fbfe0394a34c864b

    3) Github PR

    Was ich wirklich hoffe ist, dass diese PR wird akzeptiert. Es sieht, so etwas zu tun automatisch.

    https://github.com/facebook/react-native/pull/1229

    InformationsquelleAutor der Antwort bleonard

  2. 10

    Hinzufügen multiline={true} zu einer TextInput ermöglichen scrollen, wenn die Textmenge größer ist als der verfügbare Platz. Sie können dann ändern Sie die Höhe der TextInput-durch den Zugriff auf die nativeEvent.contentSize.Höhe der Veranstaltung von der onChange-prop.

    class Comment extends Component {
   state = {
      text: '',
      height: 25
   }

   onTextChange(event) {
     const { contentSize, text } = event.nativeEvent;

     this.setState({
        text: text,
        height: contentSize.height > 100 ? 100 : contentSize.height
     }); 
   }

   render() {
      return (
         <TextInput
            multiline
            style={{ height: this.state.height }}
            onChange={this.onTextChange.bind(this)}
            value={this.state.text}
         />
      );
   }
}

    InformationsquelleAutor der Antwort Groovietunes

  3. 1

    Umsetzung der UITextView's delegate-Methode textViewDidChange und spielen Sie mit dem rect - 

    - (void)textViewDidChange:(UITextView *)textView {
  CGSize constraintSize = CGSizeMake(textView.frame.size.width, MAXFLOAT);
  CGRect textRect = [textView.text boundingRectWithSize:constraintSize
                                               options:NSStringDrawingUsesLineFragmentOrigin
                                            attributes:@{NSFontAttributeName:textView.font}
                                               context:nil];
  NSLog(@"Frame:%@", NSStringFromCGRect(textRect));
  CGRect newRect = textView.frame;
  newRect.size.height = textRect.size.height;
  textView.frame = newRect;
}

    InformationsquelleAutor der Antwort Inder Kumar Rathore

  4. 1

    Ab Okt'17 es ist eine schöne Komponente von Wix, um dies zu tun:

    https://github.com/wix/react-native-autogrow-textinput

    Die Nutzung sehr einfach:

    <AutoGrowingTextInput
  style={styles.textInput}
  placeholder="Enter text"
  value={this.state.text}
  onChangeText={this._handleChangeText}
/>

    Und es gibt einige zusätzliche Requisiten wie minHeight und maxHeight zum Beispiel.

    Ich verwende es auf RN 0.47.2

    InformationsquelleAutor der Antwort zubko

Schreibe einen Kommentar