2017-09-06 4 views
4

Ich baue eine native App reagieren und ich bin ziemlich neu in diesem Zusammenhang. Ich verwende React navigation für den Wechsel von einer Seite zu einer anderen. Momentan verwende ich den Stack-Navigator.Verzögerung in der Tastatur entlassen reagieren-native

Ich habe zwei Bildschirme, A und B. In Bildschirm B habe ich einen Sucheingang, der die Tastatur verwendet. Wenn die Zurück-Taste in der Kopfzeile gedrückt wird, während die Tastatur geöffnet ist, navigiere ich zu Bildschirm A, aber es gibt eine erhebliche Verzögerung, bevor die Tastatur losgelassen wird. Ich habe Keyboard.dismiss() gestellt; in componentWillUnmount in Screen B und componentWillMount in Screen A. Unsicher, wie oder ob es möglich ist, ein onClick-Ereignis zu der Schaltfläche zurück hinzuzufügen, da ich glaube, dass es innerhalb der Header-Komponente ist.

export default class Locations extends Component { 
    static navigationOptions = { 
    title: 'Search Location', 
    } 

    renderHeader =() => { 
    return <SearchBar onChangeText={(text) =>this.handleSearch(text)} 
     placeholder="Type Here..." lightTheme round />; 
    } 
    componentWillUnmount(){ 
    Keyboard.dismiss(); 
    } 

Jeder hatte dieses Problem vor?

+0

Versuchen 'Keyboard.dismiss()' auf der Zurück-Taste drücken, anstatt in Lifecycle-Ereignissen aufgerufen wird. Es sollte wahrscheinlich die Verzögerung lösen. –

Antwort

2

Bei der Definition des StackNavigator in dieser Option zu passieren versuchen:

const StackNavigatorConfig = { 
    navigationOptions: { 
    header: ({ goBack }) => { 
     const goBackAndDismissKeyboard = (ev) => { 
      Keyboard.dismiss() 
      return goBack(ev) 
     } 
     return { left: <Left onPress={goBackAndDismissKeyboard} />} 
    }, 
    } 
} 

StackNavigator(RouteConfigs, StackNavigatorConfig) 
Verwandte Themen