应用程序被终止时点击通知后导航到特定屏幕

Question

我的问题很简单，但我找不到任何有关此的文档。

我有一个通知，如果用户未登录，应用程序会定期发送给用户，当用户点击通知时，它会打开应用程序并打开“登录”屏幕，问题是，如果应用程序被杀死，则该应用程序打开但不会导航到“登录”屏幕，它停留在主屏幕。

有什么想法可以做到这一点吗？

提前非常感谢您

现在，当用户点击通知时，我正在使用 RootNavigation.navigate('Login')。

Answer 1

您的问题是在您使用 Root Navigation.navigate() 时导航尚未加载。 你可以像这样做

    const Deferred = () => {
    let d = {};
    d.promise = new Promise(function(resolve, reject) {
        d.resolve = resolve;
        d.reject = reject;
    });
    return d;
};
const navigationDeferred = new Deferred()

---

<NavigationContainer ref={navigationRef} onReady={()=>{navigationDeferred.resolve()}} >

---

 messaging()
    .getInitialNotification()
    .then(remoteMessage => {
        if (remoteMessage) {
            console.log(
                'Notification caused app to open from quit state:',
                remoteMessage.notification,
            );
            navigationDeferred.promise.then(()=>{
               NavHelper.navigate("YourScreen");;
            })
        }
    });
   

文档中的 NavHelper 助手 https://reactnavigation.org/docs/navigating-without-navigation-prop/

Answer 2

不确定我回答是否太晚了。 @KetchUp 先生的答案是有效的，只是为了提供更多选项，请参阅下文......

您仍然可以使用默认导航。您只需要对之前答案中提到的

deferredPromise

技巧进行一些修改即可。您可以使用“集中式承诺”（我称之为）（如下面的函数），并将其添加到您计划触发导航的页面，而不是使用

RootNavigation

。示例：

HomePage

添加此...

// from sir KetchUp's answer
// add this outside the class component if you're using class-based code
const Deferred = () => {
    let d = {};
    d.promise = new Promise(function(resolve, reject) {
        d.resolve = resolve;
        d.reject = reject;
    });
    return d;
};
const navigationDeferred = new Deferred()

然后，无需创建

RootNavigation

或在

resolve()

中添加

NavigationContainer

，只需将

navigationDeferred.resolve()

放置在要触发导航的页面的

componentDidMount()

内即可。在我的示例中，它应该如下所示：

// HomePage.js

export default class HomePage extends Component {
 componentDidMount() {
// this will make sure that the page is mounted and
// navigation is ready to be used.
   navigationDeferred.resolve(); 
 }

 function showAnotherPage() {
   navigationDeferred.promise.then(()=>{
     // call the navigation.navigate here....
   });
 }
}

// ... add the deferredPromise here .../

进一步解释一下，它不会将您发送到正确的页面，因为当您点击通知时导航尚不可用。通过执行这个小技巧，模块将等待页面安装，然后导航到您想要在单击通知时显示的页面。

我希望这篇文章能对你有所帮助，祝你编码愉快！