Rozwijam grę ciekawostki, używam nawigacji reakcji, aby obsłużyć nawigację, mam 3 komponenty, (newgame, pytania, wyniki) Nie chcę, aby użytkownik wrócił do pytań z wyników, jeśli nie. Pytania zostały wyczerpane, naciskając przycisk Wstecz (sprzęt Android) zabranie go z powrotem na pytania. Następnie próbowałem poradzić sobie z przyciskiem z powrotem sprzęt, tak jak:

componentWillMount() {
      this.props.gameState(true);
      BackHandler.addEventListener('hardwareBackPress', () => {
        if (this.props.gamePlaying) { // Currently set to true. I will set it to false again on NewGame Page.
          this.props.navigation.navigate('NewGame');
        }
      });
    }

Jednakże jest to użytkownik na ekranie Newgame, ale natychmiast odbija się z powrotem do strony wyników, ponieważ strzela do nawigacji / pleców, natychmiast na stronie Newgame. Który ponownie pobiera go z powrotem do strony wyników.

Możliwa naprawa?

Chcę powstrzymać tył przycisk, aby strzelać po wylądowaniu na stronie komponentu Newgame. Czy istnieje sposób na to?

Moje środowisko

Reaguj nawigacja = ^ 1.0.0-beta.11 Reaction-Native = 0,44,0

5
Sankalp Singha 27 czerwiec 2017, 10:19

3 odpowiedzi

Najlepsza odpowiedź

Musisz zwrócić true, aby wskazać, że obsłużyłeś tylnym przyciskiem, jak widać w Dokumenty.

Jeśli jedna subskrypcja zwraca TRUE TRUE, wówczas zarejestrowane są zarejestrowane wcześniej

Twój kod powinien wyglądać następująco:

componentWillMount() {
    this.props.gameState(true);
    BackHandler.addEventListener('hardwareBackPress', () => {
        if (this.props.gamePlaying) {
            this.props.navigation.navigate('NewGame');
            return true; // This will prevent the regular handling of the back button
        }

        return false;
    });
}
10
Moti Azu 27 czerwiec 2017, 13:17

Gdy użytkownik przełącznik między ekranami w Stacknavigator znajduje się domyślnie przycisk Wstecz, możemy to naprawić, ustawienie: Headerleft do NULL

static navigationOptions =({navigation}) => {
    return {
        title: 'Rechercher une ville',
        headerLeft: null,
    }  
}
-1
Klaudia Brysiewicz 16 marzec 2018, 14:05

Jednym ze sposobów zatrzymania przycisku przed funkcjonowaniem jest wprowadzenie logiki do eventListereera z backhandler, gdy ją uruchomisz, tak:

BackHandler.addEventListener('hardwareBackPress', () => {
    const { dispatch, nav } = this.props
    if (nav.routes.length === 1 && (nav.routes[0].routeName === 'Login' || nav.routes[0].routeName === 'Start')) return false
    dispatch({ type: 'Navigation/BACK' })
    return true
})

Zauważ, jak obserwujemy warunki. Kluczem do tego pytania jest zwrócenie true lub false z słuchacza zdarzeń. false zatrzymuje przycisk Wstecz sprzętowy przed funkcjonowaniem. true Oczyść wyjścia z wydarzenia.

Oto kolejny przykład, aby zilustrować:

BackHandler.addEventListener('hardwareBackPress', () => {
    const { dispatch, nav } = this.props
    if (nav.routes[0].routeName === 'TriviaQuestion') return false
    if (!playTimeLeft && (nav.routes[0].routeName === 'TriviaQuestion')) return false
    if (nav.routes[0].routeName === 'InvasiveDialog') return false
    dispatch({ type: 'Navigation/BACK' })
    return true
})

Oto jakiś przykładowy kod, który jest przydatny, aby spojrzeć na więcej celów niż po prostu zatrzymanie tylnego przycisku przed funkcjonowaniem:

import React, { Component } from 'react'
import { Platform, BackHandler } from 'react-native'
import { Provider, connect } from 'react-redux'
import { addNavigationHelpers } from 'react-navigation'
import { NavigationStack } from './navigation/nav_reducer'
import store from './store'

class App extends Component {
    componentWillMount() {
        if (Platform.OS !== 'android') return
        BackHandler.addEventListener('hardwareBackPress', () => {
            const { dispatch, nav } = this.props
            if (nav.routes.length === 1 && (nav.routes[0].routeName === 'Login' || nav.routes[0].routeName === 'Start')) return false
            dispatch({ type: 'Navigation/BACK' })
            return true
        })
    }

    componentWillUnmount() {
        if (Platform.OS === 'android') BackHandler.removeEventListener('hardwareBackPress')
    }

    render() {
        const { dispatch, nav } = this.props
        const navigation = addNavigationHelpers({
            dispatch,
            state: nav
        })
        return <NavigationStack navigation={navigation} />
    }
}

const mapStateToProps = ({ nav }) => ({ nav })
const RootNavigationStack = connect(mapStateToProps)(App)

const Root = () => (
    <Provider store={store}>
        <RootNavigationStack />
    </Provider>
)

export default Root

Jeśli znajdziesz ten post podczas próby, aby twój przycisk wsteczny po prostu pracował, po prostu skopiuj mój ostatni przykład tak blisko, jak to możliwe. Użyj słuchacza zdarzeń dokładnie tak, jak pokazano i przetestuj najpierw aplikację, aby zobaczyć, jak to działa.

Jeśli używasz Redux, to jest to, czego chcesz.

NavigationStack Wystarczy odnosić się do export const NavigationStack = StackNavigator({ ...etc }) w innym pliku.

1
agm1984 15 październik 2017, 04:43