Question

我有带有React Navigation的React Native应用程序。我想每次更改时记录屏幕名称。

在我的应用中，我已经有多个stackNavigator和一个switchNavigator来组合它们。

现在，我刚刚将下一个onTransitionStart属性添加到所有stackNavigator的属性中：

export default createStackNavigator(
  {
    ...
  },
  {
    ...
    onTransitionStart: transitionProps => {
      console.log('move to: ', transitionProps.scene.route.routeName);
    },
  },
);

大多数情况下，它会有所帮助，而且只是我想要的。但是，在我从一个stackNavigator移到另一个stackNavigator的情况下，它不起作用。哪里有更好的方法让回调函数知道我们已经移至另一个$('button').on('click', function() { $('#test-form').append($("<input/>", { name: this.name, value: this.value, type: 'hidden' })).submit(); });并获得了它的第一个屏幕？

Answer 1

您实际上可以尝试以下方法：

import { NavigationEvents } from 'react-navigation';

render() {
  <NavigationEvents 
    onWillFocus={() => {
      console.log('screenA')
    }}
          />
}

引自documentation

NavigationEvents是一个React组件，提供声明性API来订阅导航事件。它将在安装时订阅导航事件，并在卸载时取消订阅。

Answer 2

对我来说，下一个帮助了：createAppContainer创建一个具有onNavigationStateChange属性的容器。它使用一个具有上一个和下一个导航状态作为参数的函数。他们两个都有足够的数据来了解哪个屏幕是上一个屏幕，哪个屏幕是下一个屏幕。由于我的主要应用程序组件中包含此应用程序容器，因此它的显示方式如下：

  <View>
    /* ... */
    <RootNavigator
      /* ... */
      onNavigationStateChange={(prevState, newState, action) => {
        if (action.type === 'Navigation/NAVIGATE' || action.type === 'Navigation/BACK') {
          const currentNavigator = newState.routes[newState.index];
          const screenName = currentRoute.routes[currentNavigator.index].routeName;
          console.log('Current screen is: ', screenName);
      }
    };}
    />
    /* ... */
  </View>

两个state对象都存储索引并路由属性。它们分别代表所选的stackNavigator索引和stackNavigator的列表。这样我们就可以获取所选导航器的数量，并为其获取当前路线的索引。

反应导航-获取另一个导航器的下一个屏幕名称

2 个答案: