Navgitation.navigation(param)在react native和react导航中使用PushNot

Question

当用户点击我的推送通知时，我想在我选择的页面上重定向他们。我知道如何从firebase中获取参数。

推送通知包：https://github.com/zo0r/react-native-push-notificationReact导航：https://reactnavigation.org/docs/getting-started/

索引.tsx:

import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';
import PushNotification from "react-native-push-notification";
import { useNavigation } from '@react-navigation/native';
PushNotification.configure({

onNotification: function (notification) {

console.log(notification)
screenToRedirect = notification.data.screen //from firebase key => value
//here I'd like to do something like this : 
const navigation = useNavigation(); 
navigation.navigate(screenToRedirect )
},
requestPermissions: Platform.OS === 'ios'

});
AppRegistry.registerComponent(appName, () => App);

它告诉我：无效的挂钩调用。钩子只能在函数组件的主体内部调用。问题：我无法将PushNotification.config放入组件中(文档中提到了它(。

Answer 1

不能在react组件之外使用钩子。您可以尝试此解决方案：https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

溶液

我刚刚在根目录导航中添加了主菜单。因此navigationRef返回我的主菜单，例如：

export const Drawer = createDrawerNavigator();
export const MyDrawer = () => {
return(
<Drawer.Navigator initialRouteName="Accueil">
<Drawer.Screen name="Accueil" component={Home} />
<Drawer.Screen name="Qui sommes-nous ?" component={Who} />
<Drawer.Screen name="Nos Services" component={Services} />
<Drawer.Screen name="Nos Biens" component={Bien} />
</Drawer.Navigator>
)
}
export const Bottom = createBottomTabNavigator();
export const MyBottom = () => {
return(
<Bottom.Navigator
screenOptions={({ route }) => ({
tabBarIcon: ({ focused, color, size }) => {
let iconName;
if (route.name === 'Home') {
iconName = focused
? 'home'
: 'folder';
} else if (route.name === 'Mon Profil') {
iconName = focused ? 'alert-circle' : 'aperture-sharp';
}
// You can return any component that you like here!
return <Ionicons name={iconName} size={size} color={color} />;
},
tabBarActiveTintColor: 'tomato',
tabBarInactiveTintColor: 'gray',
})}
>
<Bottom.Screen name="Home" component={MyDrawer} options={{ headerShown: false }}/>
<Bottom.Screen name="Mon Profil" component={Profil} options={{ headerShown: false }}/>
</Bottom.Navigator>
)
}

export const navigationRef = createNavigationContainerRef()
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}

const RootStack = createNativeStackNavigator();
export default function AppMenu() {
return (
<NavigationContainer ref={navigationRef} independent={true}>
<RootStack.Navigator initialRouteName="Accueil">
// Here, I return My Bottom which is the principal menu that return itself MyDrawer menu
<RootStack.Screen name="Home2" component={MyBottom} options={{ headerShown: false }}/>
</RootStack.Navigator>
</NavigationContainer>
);
}

现在My App.tsx返回AppMenu。

Answer 3

以下是我解决此问题的方法：

1-首先创建一个RootNavigation，js文件

2-在文件中添加以下代码

import {createNavigationContainerRef} from '@react-navigation/native';
export const navigationRef = createNavigationContainerRef();
export function navigate(name, params) {
if (navigationRef.isReady()) {
navigationRef.navigate(name, params);
}
}

3-在导航容器中添加navigationRef

import {navigationRef} from './RootNavigation';
<NavigationContainer ref={navigationRef}>
<MainStack />
</NavigationContainer>

4-现在，如果你已经在app.js 中初始化了推送通知，你也可以在NavigationContainer之外使用这个ref

import * as RootNavigation from './src/navigation/RootNavigation';
***if you are using one signal for push notifications then you can navigate to your screen in setNotificationOpenedHandler method***
//Method for handling notifications opened
OneSignal.setNotificationOpenedHandler(notification => {

RootNavigation.navigate("your_screen_name");
});