React Navigation使用中跟踪屏幕切换

最新推荐文章于 2024-09-10 12:29:28 发布

安迪源文

最新推荐文章于 2024-09-10 12:29:28 发布

阅读量1.1k

点赞数

CC 4.0 BY-SA版权

分类专栏： React Navigation React Native

本文链接：https://blog.youkuaiyun.com/andy_zhang2007/article/details/80135638

React Navigation 同时被 2 个专栏收录

49 篇文章

订阅专栏

React Native

31 篇文章

订阅专栏

本文介绍了一种在React Navigation中定义导航栈的方法，并提供了一个工具函数用于获取当前活动的屏幕名称。此外，还展示了如何在导航栈上监听屏幕的变化，并在每次屏幕变化时输出相关信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

定义所使用的导航栈

const RootStack = StackNavigator(
    // ... 略去具体内容
);

工具方法:获取当前屏幕名称

// gets the current screen from navigation state
function getCurrentRouteName(navigationState) {
    if (!navigationState) {
        return null;
    }
    const route = navigationState.routes[navigationState.index];
    // dive into nested navigators
    if (route.routes) {
        return getCurrentRouteName(route);
    }
    return route.routeName;
}

在使用的导航栈上监听屏幕变化

export default class App extends Component {
//... 其他代码
 
 render() {
        return (<RootStack  onNavigationStateChange={(prevState, currentState) => {
                const currentScreen = getCurrentRouteName(currentState);
                const prevScreen = getCurrentRouteName(prevState);
                if (prevScreen !== currentScreen) {
                    console.log("当前屏幕切换到了:" + currentScreen);
                }
            }}
        />);
    }

//... 其他代码
}

参考资料

Screen Tracking