Navgigation.navigate(param) 在 React Native 和 React Navigation 中使用 PushNotification

Question

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

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

Index.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.configure 放入组件中（在文档中提到）。

Answer 1

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

Answer 2

解决方案

我刚刚在根导航中添加了我的主菜单。所以 navigationRef return 我的主要菜单，例如：

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>
  );
}

现在我的 App.tsx return AppMenu。

Navgigation.navigate(param) 在 React Native 和 React Navigation 中使用 PushNotification

Navgigation.navigate(param) with PushNotification in react native and react navigation

push-notification

firebase-cloud-messaging

react-navigation