Question

当用户通过单击通知打开应用程序时，我正在尝试导航至底部标签导航器上的特定屏幕。

查看官方文档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.')
  }
}

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

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看起来就像一个丑陋的hack，因为加载时间有所不同。那么，是否有一种更好的方法或解决方案，仅在加载完成后才可以导航（我正在考虑使用redux）并且已经安装了导航器（不确定如何执行此操作）？

队列导航，直到安装屏幕，然后导航

0 个答案: