Если вы новичок в разработке приложений на основе React Native, то почувствуете усталость от чтения и найдете материал из разных блогов, статей и сайтов вопросов и ответов.
Позвольте мне познакомить вас с руководством о том, как легко реализовать обратную навигацию в приложении React Native. Я предполагаю, что вы уже внедрили Навигатор стека в свое приложение (если у вас его нет, эта документация поможет вам в реализации).
Прежде всего, есть два типа обратной навигации.
- Аппаратное обеспечение Назад Нажмите
- Программное обеспечение Назад Нажмите
Что ж, давайте сначала посмотрим, как реализовать аппаратное обратное нажатие.
Аппаратное обратное нажатие в 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.