5

当用户通过单击通知打开应用程序时，我试图导航到底部选项卡导航器上的某个屏幕。

查看官方文档Navigating without the navigation prop，我的主导航器设置如下：

import {navigationRef, isReadyRef} from './root';

const MainNav = _ => {
  if (isLoading) {
    return isFirstTime ? (<OnBoarding />) : (<SplashScreen />);
  }

  return (
    <NavigationContainer
      ref={navigationRef}
      onReady={() => {isReadyRef.current = true}}>
        {!token ? <AuthNav /> : <AppNav />}
    </NavigationContainer>
  );
}

我的root.js如下：

import * as React from 'react';

export const isReadyRef = React.createRef();

export const navigationRef = React.createRef();

export function navigate(name, params) {
  if (isReadyRef.current && navigationRef.current) {
    // Perform navigation if the app has mounted
    navigationRef.current.navigate(name, params);
  } else {
    // You can decide what to do if the app hasn't mounted
    // You can ignore this, or add these actions to a queue you can call later
    console.log('Not mounted yet.')
  }
}

我在我的根目录中添加了 OneSignal 事件侦听器，index.js如下所示：

const App = _ => {
  useEffect(() => {
    OneSignal.addEventListener('opened', onOpened);
    
    return () => OneSignal.removeEventListener('opened', onOpened);
  }, []);

  return {
    <StoreProvider store={store}>
      <MainNav />
    </StoreProvider>
  }
}

我的onOpened功能如下：

import {navigate} from '../nav/root';

const onOpened = ({notification}) => {
  if(notification.type == 'New Request'){
    navigate('Notifications');
  }
}

但是当我按预期测试它时会Not mounted yet.打印到控制台。所以我想

将这些操作添加到您可以稍后调用的队列中

正如官方反应导航文档所述，但我不知道该怎么做。我发现react-native-queue但它不再被维护并且使用 setTimeout 似乎是一个丑陋的黑客，因为加载时间会有所不同。那么有没有更好的方法或解决方案，我只能在加载完成（我正在考虑为此使用 redux）并且我的导航器已安装（不知道如何执行此操作）后才能使用导航？

4

0 回答 0