函数组件
import { useNavigation } from '@react-navigation/native';
const navigation = useNavigation();
navigation.goBack();
class组件
需要自己封装
主要运用的是ref
function App() {
const navigationRef = React.useRef(null);
return (
<View style={{ flex: 1 }}>
<Button onPress={() => navigationRef.current?.navigate('Home')}>
Go home
</Button>
<NavigationContainer ref={navigationRef}>{/* ... */}</NavigationContainer>
</View>
);
}
在这个基础上我们可以封装一个全局的navigationRef
参考 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>
);
}
2.RootNavigation.js 导出各种自己想要的方法
import * as React from 'react';
import { StackActions } from '@react-navigation/native';
export const navigationRef = React.createRef();
export function navigate(name, params) {
navigationRef.current?.navigate(name, params);
}
export function push(...args) {
navigationRef.current?.dispatch(StackActions.push(...args));
}
3.在想要的class组件中获取
// any js module
import * as RootNavigation from './path/to/RootNavigation.js';
// ...
RootNavigation.navigate('ChatScreen', { userName: 'Lucy' });