Rub*_*shi 5 react-native react-redux react-navigation react-native-onesignal
当用户通过单击通知打开应用程序时,我尝试导航到底部选项卡导航器上的某个屏幕。
查看官方文档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>
);
}
Run Code Online (Sandbox Code Playgroud)
我的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.')
}
}
Run Code Online (Sandbox Code Playgroud)
我在我的根目录中添加了 OneSignal 事件监听器,index.js如下所示:
const App = _ => {
useEffect(() => {
OneSignal.addEventListener('opened', onOpened);
return () => OneSignal.removeEventListener('opened', onOpened);
}, []);
return {
<StoreProvider store={store}>
<MainNav />
</StoreProvider>
}
}
Run Code Online (Sandbox Code Playgroud)
我的onOpened功能如下:
import {navigate} from '../nav/root';
const onOpened = ({notification}) => {
if(notification.type == 'New Request'){
navigate('Notifications');
}
}
Run Code Online (Sandbox Code Playgroud)
但是当我测试它时,它会按预期Not mounted yet.打印到控制台。所以我想
将这些操作添加到您可以稍后调用的队列中
正如官方反应导航文档所述,但我不知道如何做到这一点。我发现了react-native-queue,但它不再被维护,并且使用setTimeout似乎是一个丑陋的黑客,因为加载时间各不相同。那么是否有更好的方法或解决方案,我只能在加载完成后才可以使用它进行导航(我正在考虑为此使用 redux)并且我的导航器已安装(不知道如何执行此操作)?
| 归档时间: |
|
| 查看次数: |
1019 次 |
| 最近记录: |