没有导航道具的 React 导航导航示例不起作用 [英] React navigation navigate without navigation props example not working
问题描述
我有一个 react-native 应用程序,我正在使用新的 Context API 来管理存储和内容,现在我将 createAppContainer(AuthNavigator)
包装在 <Provider>
由上下文 API 创建,因此为了从上下文 API 文件导航,我尝试通过创建 NavigationService
并传递在文档中找到的完全相同的示例来执行AppContainer
的 ref
到 NavigationService
并使用 { NavigationActions }
,不知何故它不起作用也没有抛出任何种类错误
I have a react-native app and I'm using the new Context API to manage the storage and stuff, now I'm wrapping the createAppContainer(AuthNavigator)
in the <Provider>
created by the context api, so in order to navigate from the Context API file, I tried to do the exact same example I found in the documentation by creating the NavigationService
and passing the ref
of the AppContainer
to the NavigationService
and using { NavigationActions }
, somehow it's not working neither it's throwing any kind of error
这是我的 router.js
here is my 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
};
这是我要从中导航的提供者
and here is the Provider from which i want to navigate
这是一个 React Context API
it's a React Context API
import NavigationService from '@utils/navigation-service';
onReceived(notification) {
console.warn(notification.payload.additionalData);
console.warn('triggered');
NavigationService.navigate('Chat');
}
推荐答案
根据 react-navigation 网站上的示例(https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
Your route_name
should be routeName
instead according to the example on react-navigation website (https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html)
他们需要密钥 routeName
¶ms
专门用来工作
They require the keys routeName
& params
specifically to work
这篇关于没有导航道具的 React 导航导航示例不起作用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!