【react native】不要组件的props实现页面跳转

上一篇写了react native实现通过组件props跳转，但是有的时候我们是不容易拿到组件的props的，那怎么办呢？

封装跳转公共方法

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

export const navigationRef = createNavigationContainerRef();

/**
 * 跳转到某个页面
 * @param name  页面name
 * @param params  可选,参数携带
 */
export const to = (name: string, params?: object) => {
  if (navigationRef.isReady()) {
    // @ts-ignore
    navigationRef.navigate(name, params);
  }
};

/**
 * 返回
 * @param count  返回几层,不写返回一层
 */
export const back = (count: number = 1) => {
  if (navigationRef.isReady()) {
    navigationRef.dispatch(StackActions.pop(count));
  }
};

把方法中定义的navigationRef(根路径App.tsx中)

import React from 'react';
import {NavigationContainer} from '@react-navigation/native';
import {navigationRef} from '@/utils/navigation';

const App = () => {
    <NavigationContainer ref={navigationRef}>
    </NavigationContainer>
  );
};

export default App;

引入使用

import {to} from '@/utils/navigation';

<TouchableOpacity
   onPress={() => {
     to('editUserInfo');
   }}>
   <Text style={styles.editBtn}>编辑资料</Text>
 </TouchableOpacity>

参考

https://reactnavigation.org/docs/navigating-without-navigation-prop