React Native 使用硬件后退按钮导航到不同的选项卡-解网

问：

我正在尝试使用 react 导航更改默认的 android 硬件后退按钮行为。我有带有 6 个选项卡的底部选项卡导航器。例如 Tab1 到 Tab6 。当我从通知中打开应用程序时（取决于某些条件），初始选项卡是 Tab5 或 Tab6，但是当我按下 android 硬件后退按钮时，我切换到了 Tab1（这是我的主页选项卡），但我想切换到 Tab4。

我设法更改了后退按钮行为以打开一些模式，并打开了按钮以导航到选项卡 4。我的问题是，可以在没有一些警报或模态的情况下完成吗？

根据文档，我将事件侦听器包装在 useFocusEffect 和 UseCallback 中

const jumpToMessage = TabActions.jumpTo('Message');

useFocusEffect(
    useCallback(() => {
      const backAction = () => {
        navigation.dispatch(jumpToMessage);
      };
      const subscription = BackHandler.addEventListener(
        'hardwareBackPress',
        backAction
      );
      return subscription.remove();
    }, [])
  );

安卓 react-native react-navigation react-native-navigation

const tabs = ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4', 'Tab 5'];

function Tabs() {
  const navigation = useNavigation();
  const state = useNavigationState((state) => state);

  useEffect(() => {
    const backAction = () => {
      if (state != undefined) {
        navigation.navigate(tabs[state.index > 0 ? state.index - 1 : 0]);
      }
      return true;
    };

    const backHandler = BackHandler.addEventListener(
      'hardwareBackPress',
      backAction
    );

    return () => backHandler.remove();
  }, [navigation, state]);

  return (
    <Tab.Navigator backBehavior="none">
      {tabs.map((tab) => (
        <Tab.Screen name={tab} component={Screen} />
      ))}
    </Tab.Navigator>
  );
}

React Native 使用硬件后退按钮导航到不同的选项卡

React Native navigate to different tab with hardware back button

评论

评论