美文网首页
React Native 监听物理返回键的完美解决

React Native 监听物理返回键的完美解决

作者: _悟_空 | 来源:发表于2021-04-08 16:46 被阅读0次
    //导入
    import { createStackNavigator } from '@react-navigation/stack';
    import {
      ...
        BackHandler,
    } from 'react-native';
    const Stack = createStackNavigator();
    
    function App(props) {
        let lastBackPressed = Date.now();
        const onBackAndroid = () => {
            if (lastBackPressed && lastBackPressed + 2000 >= Date.now()) {
                BackHandler.exitApp();
                return false;
            }
            lastBackPressed = Date.now();
            Toast('再按一次退出应用');
            return true;
        }
    
          return (
            <Stack.Navigator initialRouteName="main" screenOptions={props => {
                /********************核心代码***********************/
                // 使用的时候只需要把'HomePage'换成你工程里的首页就可以了。
                const { navigation, route } = props;
                if (route.name === 'HomePage' && navigation.isFocused()) {
                    BackHandler.addEventListener('hardwareBackPress', onBackAndroid);
                } else if (route.name !== 'HomePage' && navigation.isFocused()) {
                    console.log("==-=-=-=other");
                    BackHandler.removeEventListener('hardwareBackPress', () => { return true; });
                }
                /********************核心代码***********************/    
                return {
                    headerBackImage: () => (...),
                    ...
                    headerStyle: {
                        elevation: 0,
                    },
                    ...
                };
            }}>
                <Stack.Screen
                    name="HomePage"
                    component={HomePage}
                />
                ....
            </Stack.Navigator>
    }
    

    相关文章

      网友评论

          本文标题:React Native 监听物理返回键的完美解决

          本文链接:https://www.haomeiwen.com/subject/agjvkltx.html