Если вы новичок в разработке приложений на основе React Native, то почувствуете усталость от чтения и найдете материал из разных блогов, статей и сайтов вопросов и ответов.

Позвольте мне познакомить вас с руководством о том, как легко реализовать обратную навигацию в приложении React Native. Я предполагаю, что вы уже внедрили Навигатор стека в свое приложение (если у вас его нет, эта документация поможет вам в реализации).

Прежде всего, есть два типа обратной навигации.

  1. Аппаратное обеспечение Назад Нажмите
  2. Программное обеспечение Назад Нажмите

Что ж, давайте сначала посмотрим, как реализовать аппаратное обратное нажатие.

Аппаратное обратное нажатие в React Native

В этом сценарии мы используем BackHandler React Native API.

Используйте следующую реализацию и проверьте наличие аппаратного обратного пресса в симуляторе или мобильном устройстве.

import {BackHandler} from "react-native";
export default class BackNavigationTestComponent extends React.Component {
constructor(props) {
    super(props);
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}
componentWillMount() {
    BackHandler.addEventListener('hardwareBackPress', this.handleBackButtonClick);
}

componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress', this.handleBackButtonClick);
}

handleBackButtonClick() {
    this.props.navigation.goBack(null);
    return true;
}
}

Программное обеспечение Назад Нажмите

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

import {BackHandler, TouchableOpacity, View} from "react-native";
import Icons from 'react-native-vector-icons/MaterialIcons';
export default class BackNavigationTestComponent extends React.Component {
constructor(props) {
    super(props);
    this.handleBackButtonClick = this.handleBackButtonClick.bind(this);
}
handleBackButtonClick() {
    this.props.navigation.goBack(null);
    return true;
}
render() {
return(
<View>
<TouchableOpacity onPress={this.handleBackButtonClick}>
    <Icons name={'arrow-back'} size={30} color='#fff' style={{marginLeft: '3%'}}/>
</TouchableOpacity>
</View>
)
}
}

Тада! Теперь вы завершили реализацию обеих функций обратной навигации в своем приложении React Native.