React Native - Как управлять родной кнопкой «Назад» с помощью навигации по ящикам

Question

Я заново создал навигацию по ящикам, следуя этому коду: https://github.com/mariodev12/react-native-menu-drawer-navigator

Все работает правильно, но теперь я не знаю, как обращаться с родной кнопкой, чтобы вернуться назад. Я хотел бы всегда возвращаться к предыдущемустраницы, но если вы дважды нажмете в главном меню, выйдите из приложения.

Это мой код:

App.js

import React from 'react';
import {StackNavigator} from 'react-navigation';
import DrawerStack from './src/stacks/drawerStack';

const Navigator = StackNavigator({
    drawerStack: {screen: DrawerStack}
}, {
    headerMode: 'none',
    initialRouteName: 'drawerStack'
})

export default Navigator

pocketStack.js

import React from 'react'
import {StackNavigator, DrawerActions} from "react-navigation";
import {Text, View, TouchableOpacity} from 'react-native';
import Home from "../components/home";
import DrawerScreen from "./drawerScreen";

const DrawerNavigation = StackNavigator({
    DrawerStack: {screen: DrawerScreen}
}, {
    headerMode: 'float',
    navigationOptions: ({navigation}) => ({
        headerStyle: {
            backgroundColor: 'rgb(255,45,85)',
            paddingLeft: 10,
            paddingRight: 10
        },
        title: 'Home',
        headerTintColor: 'white',
        headerLeft: <View>
            <TouchableOpacity
                onPress={() => {
                    if (navigation.state.isDrawerOpen === false) {
                        navigation.dispatch(DrawerActions.openDrawer());
                    } else {
                        navigation.dispatch(DrawerActions.closeDrawer());
                    }
                }}>
                <Text>Menu</Text>
            </TouchableOpacity>
        </View>
    })
})

export default DrawerNavigation;

knifeScreen.js

import {DrawerNavigator} from 'react-navigation'
import Home from '../components/home';
import Login from '../components/login';
import Contacts from '../components/contacts';
import News from '../components/news';

const DrawerScreen = DrawerNavigator({
    Home: {screen: Home},
    Login: {screen: Login},
    Contacts: {screen: Contacts},
    News: {screen: News}
}, {
    headerMode: 'none',
    initialRouteName: 'Home'
})

export default DrawerScreen;

news.js "Пример одной страницы"

import React from "react";
import {Text, View} from 'react-native';

export default class News extends React.Component {
    render() {

        return (
            <View>
                <Text> Here Leave the News!! </Text>
            </View>
        );
    }
}

Теперь, как мне вставить кнопку «Назад» в заголовок вместо классического меню (DrawerStack) только для страницы «News.js»?

Answer 1

Вам также необходимо создать кнопку на экране новостей, например, так.

import React from "react";
import {Text, View} from 'react-native';

export default class News extends React.Component {

    static navigationOptions = ({navigation}) => {
        return {
            headerLeft: --- PUT HERE YOU CUSTOM BUTTON (Use navigation.goBack() in onPress)
        }
    }

    render() {

        return (
            <View>
                <Text> Here Leave the News!! </Text>
            </View>
        );
    }
}

Чтобы сделать лучше, вы можете создать новый экран только с вашими пользовательскими параметрами навигации.

Answer 2

В Android вы должны самостоятельно обрабатывать действия кнопки «Назад» с помощью BackHandler из Reaction-native.

Прежде всего

import { BackHandler } from 'react-native';

в ComponentDidMount добавьте прослушиватель событий для прослушивания backpress:

componentDidMount() {
    BackHandler.addEventListener("hardwareBackPress", this.onBackPress);
}

в ComponentwillUnmount убедитесь, что вы удалили слушателя:

componentWillUnmount() {
    BackHandler.removeEventListener("hardwareBackPress", this.onBackPress);
}

затем

 onBackPress = () => {

     //inside here do what you want with single back button
 }

Также проверьте ссылку: https://reactnavigation.org/docs/en/drawer-based-navigation.html

Если вы хотите вернуться к предыдущему экрану с навигацией по выдвижным кнопкам назад, это не для вас, и вы должны попробовать использовать Stack Navigator.