react-navigation没有props的界面跳转

方案一，直接使用

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

const App=()=>{
  // 获取导航器
  const navigationRef = React.useContext(NavigationContext);
  const click=()=>{
    navigationRef.navigate('Details',{id:1})
  }
  return (
    <View style={{flex:1}}>
      <TouchableOpacity onPress={click}>
        进入详情页
      </TouchableOpacity>
    </View>
  )
}

方案二：封装跳转公共方法

import {createNavigationContainerRef} from '@react-navigation/native';
import {StackActions} from '@react-navigation/native';
 
export const navigationRef = createNavigationContainerRef();
 
/**
 * 跳转到某个页面
 * @param name  页面name
 * @param params  可选,参数携带
 */
export const push = (name, params) => {
  if (navigationRef.isReady()) {
    navigationRef.navigate(name, params);
  }
};
 
/**
 * 返回
 * @param count  返回几层,不写返回一层
 */
export const back = (count = 1) => {
  if (navigationRef.isReady()) {
    navigationRef.dispatch(StackActions.pop(count));
  }
};

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 {push} from '@/utils/navigation';
 
<TouchableOpacity onPress={() => {push('editUserInfo')}}>
   <Text>编辑资料</Text>
 </TouchableOpacity>