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

ev7lccsx 于 2023-11-21 发布在 React

关注(0)|答案(1)|浏览(141)

我试图改变默认的Android硬件返回按钮的行为与React导航.我有底部标签导航6标签.例如Tab1到Tab6 .当我打开应用程序从通知（取决于某些条件）初始标签是Tab5或Tab6，但当我按下Android硬件返回按钮我得到切换到Tab1（这是我的主页标签），但我想被切换到Tab4.
我设法改变了返回按钮的行为，打开一些模态和按钮导航到标签4。我的问题是，可以这样做没有一些警报或模态？
根据文档，我将事件侦听器 Package 在useFocusEffect和WARDCallback中
第一个月

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

字符串

react-native

来源：https://stackoverflow.com/questions/77488517/react-native-navigate-to-different-tab-with-hardware-back-button

1条答案

按热度按时间

i5desfxk1#

在导航器中使用none作为backBehavior来删除默认处理，然后使用BackHandler作为自定义行为。下面是导航到上一个选项卡的简单示例。

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>
  );
}

字符串

赞(0）回复(0）举报 2023-11-21

我来回答

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

1条答案

相关问题

热门标签

最新问答