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

Posted 2022-12-11 GHUIJS

上一篇写了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