在独立组件中获取导航道具React Native
在独立组件中获取导航道具React Native
提问于 2018-04-12 14:27:56
我的app.js文件如下所示
export default class App extends React.Component {
render() {
return (
<Root style={{
flex: 1
}}>
<FcmHandler/>
</Root>
)
}
}Root组件是整个应用程序与所有功能一起驻留的地方，FcmHandler是我处理与通知相关的功能的地方。在FcmHandler中，我有一个方法，在单击通知时获得回调，在此回调中，我需要根据通知单击导航到应用程序中的特定屏幕。
问题是使用上面的当前代码，FcmHandler组件甚至从未被初始化过。
如果我尝试这样的东西
export default class App extends React.Component {
render() {
return (
<View style={{
flex: 1
}}>
<Root/>
<FcmHandler/>
</View>
)
}
}调用了FcmHandler组件，但我不能访问驻留在<Root/>组件中的导航属性。
<Root/>组件由以下部分组成
const ArticleStack = StackNavigator(
{
...
}
);
const SettingsStack = StackNavigator({
...
});
export const Root = StackNavigator({
Articles: {
screen: ArticleStack
},
Settings: {
screen: SettingsStack
},
}, {
mode: 'modal',
headerMode: 'none'
});我试图实现的基本目标是，当一个通知被点击时，无论应用程序当前在哪个屏幕上，我都应该能够导航到特定的屏幕。我不想在我拥有的每个屏幕组件中都编写导航代码，这似乎是多余的。
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-04-13 02:02:58
您可以使用this official guide创建导航服务。然后使用FcmHandler中的导航服务，而不是navigation prop。这样就不需要将FcmHandler作为导航器的子级。
如果你使用的是redux或mobx，最好将你的导航状态移到store以便于访问。对于redux，有一个official integration guide。对于mobx，您可以尝试this。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/49789455
复制相关文章
相似问题