如何在 App.js 中访问 this.props.navigation答案

【问题标题】：How to access this.props.navigation in App.js如何在 App.js 中访问 this.props.navigation
【发布时间】：2019-09-02 15:28:51
【问题描述】：

我想将导航道具传递给 App.js 中的 firebase notificationListener 但 this.props.navigation 未定义，我可以理解为 App.js 是启动导航的根。如果有任何解决方法，那就太好了。谢谢！

class App extends Component { 

componentDidMount() {
    notificationListener.initNotificationListener(this.props.navigation);
  }

  render() {
    return (
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={null}>
          <Navigation />
        </PersistGate>
      </Provider>
    );
  }
}

export default App

【问题讨论】：

尝试参考https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
谢谢！在那里找到了解决方案。如果您想将其添加为答案，我会将其标记为解决方案。

标签： react-native react-navigation

【解决方案1】：

在打开通知时无法访问 app.js 中的 props.navigation 的一种解决方法是在从通知中打开应用时在异步存储中设置一个值

//IN APP.JS
const notificationOpen = await 
    firebase.notifications().getInitialNotification();
    if (notificationOpen) {
      this._accessFromNotification();
    }

_accessFromNotification = async () => {
   console.log("Setting Access from Notification")
   await AsyncStorage.setItem('accessFromNot', true);}

之后，您可以从导航堆栈中第一个组件的 componentDidMount 内的异步存储中调用此变量，如果变量的 value==true，则从那里导航到另一个组件。

//IN THE FIRST COMPONENT THAT HAS ACCESS TO PROPS NAVIGATION 
componentDidMount() {
this._verifyOpenFromNot()
}

_verifyOpenFromNot = async()=>{
   const acc=  await AsyncStorage.getItem('accessFromNot');


    if (acc){

        this.props.navigation.navigate('NotificationViewer');
        this._setAccessFalse();
      }


}

最后，您应该更新异步存储，将 accessFromNot 变量设置为 false，以避免下次打开应用时自动导航。

_setEntroDesdeNotFalse = async () => {
await AsyncStorage.setItem('accessFromNot', 'false');}

【讨论】：