没有导航道具的反应导航导航示例不起作用答案

【问题标题】：React navigation navigate without navigation props example not working没有导航道具的反应导航导航示例不起作用
【发布时间】：2019-07-01 20:04:59
【问题描述】：

我有一个 react-native 应用程序，我正在使用新的 Context API 来管理存储和内容，现在我将 createAppContainer(AuthNavigator) 包装在由 context api 创建的 <Provider> 中，所以为了从上下文 API 文件导航，我尝试通过创建NavigationService 并将AppContainer 的ref 传递给NavigationService 并使用{ NavigationActions } 来执行我在文档中找到的完全相同的示例，不知何故它是不工作也不会抛出任何错误

这是我的 router.js

  const AuthNavigator = createSwitchNavigator(
    {
      Authenticated: Authenticated,
      UnAuthenticated: UnAuthenticated,
    },
    {
      initialRouteName: props.is_authenticated ? 'Authenticated' : 'UnAuthenticated'
    }
  )

  const Router = createAppContainer(AuthNavigator);

  return (

    <Provider style={{ width: '100%', height: '100%' }}>
      <Router ref={ ref => NavigationService.setTopLevelNavigator(ref) } />
      <DropdownAlert
        successColor="#26296A"
        titleStyle={{ fontFamily: 'DINNextLTArabic-Regular', lineHeight: 18, color: '#fff', textAlign: 'center' }}
        messageStyle={{ fontFamily: 'DINNextLTArabic-Regular', lineHeight: 16, color: '#fff', textAlign: 'center' }}
        imageStyle={{ display: 'none' }}
        ref={ (ref) => Flash.setDropDown(ref) }
      />
    </Provider>

  )

}

export default ReactNavigator;

这是我的导航服务文件

import { NavigationActions } from 'react-navigation';

let navigator;

function setTopLevelNavigator(nav_ref) { navigator = nav_ref }

function navigate(route_name, params) {
  navigator.dispatch(
    NavigationActions.navigate({
      route_name,
      params
    })
  )
}

export default {
  navigate,
  setTopLevelNavigator
};

这是我要导航的提供者

这是一个 React 上下文 API

import NavigationService from '@utils/navigation-service';

onReceived(notification) {

  console.warn(notification.payload.additionalData);

  console.warn('triggered');

  NavigationService.navigate('Chat');

}

【问题讨论】：

在我看来，您已经按照自己的方式设置了所有内容。我唯一的猜测是在“setTopLevelNavigator”之前调用了“onReceived”函数。尝试在上述函数中添加一些console.logs，看看是不是这样。因为如果首先调用 onReceived，则导航器引用尚未设置，因此更改屏幕的调用将失败。
不错的一个实际上我稍后会尝试..并回复

标签： reactjs react-native react-navigation react-native-navigation react-navigation-stack

【解决方案1】：

根据 react-navigation 网站 (https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html) 上的示例，您的 route_name 应该是 routeName

他们需要密钥 routeName 和 params 才能工作

【讨论】：