526互联

React Native在非组件的地方使用页面跳转（interceptors拦截器处跳转页面）

发布时间 2023-11-01 14:33:05作者: 流水飘香

官方文档：https://reactnavigation.org/docs/navigating-without-navigation-prop/

  1. 修改APP.js
import { NavigationContainer } from '@react-navigation/native';
import { navigationRef } from './RootNavigation';

export default function App() {
  return (
    <NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
  );
}
  1. 定义一个RootNavigation.js文件
// RootNavigation.js

import { createNavigationContainerRef } from '@react-navigation/native';

export const navigationRef = createNavigationContainerRef()

export function navigate(name, params) {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
}

// add other navigation functions that you need and export them
  1. 在其他地方使用
// any js module
import * as RootNavigation from './path/to/RootNavigation.js';

// ...

RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });