React Native ：导航到屏幕"nested inside BottomTabNavigator"从 Firebase 推送通知点击

Question

这是我在App.js.中的BottomNavigator代码的一部分

const Bottom = createBottomTabNavigator();
return (
<Bottom.Navigator
tabBarOptions={...}>
<Bottom.Screen
name="ScreenA"
component={ScreenA}
options={...}
/>
<Bottom.Screen
name="ScreenB"
component={ScreenB}
options={...}
/>
<Bottom.Screen
name="ScreenC"
component={ScreenC}
options={...}
/>
<Bottom.Screen
name="Chat"
component={Chat}
options={({navigation}) => ({
tabBarLabel: StringsOfLanguages.chat,
tabBarIcon: ({focused, color, size}) =>
focused ? (
<Image
style={appStyles.bottomTabImgSize}
source={require('./assets/abc.svg')}
/>
) : (
<Image
style={appStyles.bottomTabImgSize}
source={require('./assets/def.svg')}
/>
),
tabBarButton: (props) => 
<TouchableOpacity
{...props}
onPress={() =>
navigation.navigate('Chat', {screen: 'ChatSubA'})
}
/>
})}
/>
</Bottom.Navigator>
);

这是名为"的底部选项卡的代码；聊天">

const Chat = () => {
// Usually ChatSubB is called from ChatSubA.. But on receiving push notification
// ChatSubB should be directly loaded.
<Stack.Navigator initialRouteName="ChatSubA">
<Stack.Screen
name="ChatSubA"
component={ChatSubA}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubB"
component={ChatSubB}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubC"
component={ChatSubC}
options={{headerShown: false}}
/>
<Stack.Screen
name="ChatSubD"
component={ChatSubD}
options={{headerShown: false}}
/>
</Stack.Navigator>
);};

假设我想从ScreenA/ScreenB/ScreenC导航到"ChatSubB"屏幕，我正在使用代码

props.navigation.navigate(Chat, {
screen: ChatSubB,
params: {param1:'hai'},

})；

但现在我需要在点击推送通知时调用"ChatSubB"我没有"props"或"navigation"可用于调用上面的代码行。这是我的PushNotificationHelper.js文件。我从App.js useEffect((调用这些方法

import messaging from '@react-native-firebase/messaging';
import AsyncStorage from '@react-native-async-storage/async- storage';
export async function requestUserPermission() {
...
await getFcmToken();}
export async function getFcmToken() {
...}
export const notificationListener = (navigate) => {
messaging().onNotificationOpenedApp(remoteMessage => {
console.log(
'Notification caused app to open from background state:',
remoteMessage.notification,
);
// navigate("ChatScreen",{
//     result: "2371820992-5406-07082-13972-17488760826513",
//   });
// navigate('ChatScreen', {
//   result: "2371820992-5406-07082-13972-17488760826513",
// });
navigate("Others", {
screen: ChatScreen,
params: {result: "2371820992-5406-07082-13972-17488760826513"},
});
});}

在参考获取道具或导航时，我发现了一个使用createRef 的解决方案

// RootNavigation.js
import * as React from 'react';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}

并使用

RootNavigation.navigate('ChatSubB ', {param1:'hai'})

但这个代码对我来说不起作用，因为"；ChatSubB"；嵌套在BottomTabNavigator中选项卡"；聊天"。

有其他解决方案可以满足我的要求吗？任何帮助都将不胜感激。。

Answer 1

正如文档中所解释的，您可以像这样导航-

RootNavigation.navigate('ChatSubB', {
screen: 'Chat',
params: {
param1:'hai'
}
});

Answer 2

也许这份文档会对您有所帮助？https://reactnavigation.org/docs/nesting-navigators/#nesting-多导航

并尝试使用导航挂钩(