Reagieren Native Android Tastatur Highlight Text Problem

Haben ein Android-Problem beim Markieren von Text in einer Eingabekomponente auf React Native.Reagieren Native Android Tastatur Highlight Text Problem

Funktionen fein, wenn die Anwendung neu starten, können Sie das Eingabefeld ein und Art und Nachrichten senden wie folgt öffnen und schließen:

Nun, das Problem tritt auf, wenn Sie auf das Halten Text, um ihn zu markieren (so können Sie kopieren/Einfügen/cut Text):

Nachdem dies geschehen ist, hat das Schließen und erneute Öffnen des Textfelds den gleichen Effekt (die Navigation auf der unteren Leiste wird angezeigt). Die Tastatur scheint jetzt oben auf dem Bildschirm überlagert zu sein, da der Text unten gerendert wird, als ob die Tastatur minimiert wäre, unabhängig davon, ob sie aktiv ist oder nicht.

Wie ändert dieser Aspekt den Status der Anwendung für die Tastatur? Könnte jemand mich verlinken oder informieren, wie ich mit der Copy/Paste-Funktion, die oben für Android angezeigt wird, umgehen kann? Was nicht sinnvoll ist, ist, dass die gesamte Anwendung für die Tastatureingabe unterbrochen wird, sobald dies geschehen ist - Sie können es durch einen Neustart der Anwendung wieder zum Laufen bringen.

Der entsprechende Code ist unten (wenn es etwas fehlt nur sagen):

DeviceEventEmitter Code:

componentDidMount: function(){ 
    let context = this, 

    DeviceEventEmitter.addListener('keyboardWillShow', function(e: Event) { 
     context.setState({ 
      height: context.listViewMaxHeight - e.endCoordinates.height + 50, 
     }); 
    }); 

    DeviceEventEmitter.addListener('keyboardWillHide', function(e: Event) { 
     context.setState({ 
      height: context.listViewMaxHeight, 
     }) 
    }); 
}

Input-Komponente in der Komponente Render-Funktion:

 <View style={styles.textInputContainer}> 
      <TextInput 
      maxNumberOfLines={8} 
      multiline={true} 
      autoFocus={false} 
      editable={true} 
      numberOfLines= {5} 
      ref='textInput' 

      onChangeText={this.onChangeText} 
      style={[styles.textInput, {height: context.props.textInputHeight}]} 
      placeholder={context.props.placeholder} 
      placeholderTextColor="#5A5A5A" 
      value={context.state.text}/> 

      <Button 
       style={styles.sendButton} 
       onPress={this._onPress} 
       disabled={this.state.disabled}> 
      Send </Button> 
     </View>

Quelle

2016-03-29 George Lovegrove

Ich bin nicht sicher, ob dies das Problem ist, da die Tastatur die meiste Zeit korrekt verhält, aber ich denke nicht, dass keywordWillHide und keyboardWillShow noch für Android implementiert ist. Allerdings ist keyboardDidShow und keyboardDidHide. Siehe: https://github.com/facebook/react-native/issues/3468 – pinewood

@pinewood Yeh die Tastatur funktioniert gut, als wenn die hervorgehobene Funktionalität an der Spitze erscheinen Sie können immer noch tippen und schließen Sie die Tastatur, so dass die Tastatur isn Das Problem. Was der hervorgehobene Text jedoch durchbricht, ist die Höhe der Ansicht, in der der Inhalt dorthin zurückkehrt, wo er wäre, wenn die Tastatur nicht angezeigt wird, unabhängig von der SetState-Höhe des Keyboard-Ereignis-Emitters. Wenn es einen Komponentennamen dafür gibt, kann ich vielleicht den Zustand basierend auf seinen Eigenschaften besser verwalten und wenn es aktiv ist –

@pinewood oh und yeh ich versuchte mit DidShow und DidHide natürlich, beide funktionieren gleich. –

der Haupt erste Teil dieses Problems war die Verwendung von keyboardDidShow und keyboardDidHide anstelle von keyboardWillShow und keyboardWillHide. (Danke @pinewood)

DeviceEventEmitter.addListener('keyboardDidShow', function(e: Event) { 
    context.setState({ 
     height: context.listViewMaxHeight - e.endCoordinates.height + 50, 
    }); 
}); 

DeviceEventEmitter.addListener('keyboardDidHide', function(e: Event) { 
    context.setState({ 
     height: context.listViewMaxHeight, 
    }) 
});

Die zweite Komponente ist dafür, dass mit dem Manifest spielen, um die gewünschten Tastatur Funktionalität zu erhalten, zur Zeit wechselten wir zu:

<activity android:windowSoftInputMode="stateUnspecified|adjustPan" />

Das Problem mit der Tastatur auch besser hier - https://github.com/exponentjs/react-native-tab-navigator/issues/48

Quelle

2016-04-03 14:19:28

Reagieren Native Android Tastatur Highlight Text Problem

Antwort

Verwandte Themen