与导航一起传递的React导航方法

this.props.navigation.navigate('RouteName', { /* params */ });

this.props.navigation.push('RouteName', { /* params */ });

this.props.navigation.goBack();

this.props.navigation.goBack(null); // 返回上一级
this.props.navigation.goBack('RouteName'); // 返回到特定路由

this.props.navigation.reset({
  index: 0,
  routes: [{ name: 'RouteName' }],
});

this.props.navigation.replace('RouteName', { /* params */ });

this.props.navigation.setOptions({
  title: 'New Title',
  headerStyle: {
    backgroundColor: '#f4511e',
  },
  headerTintColor: '#fff',
  headerTitleStyle: {
    fontWeight: 'bold',
  },
});

const unsubscribe = this.props.navigation.addListener('focus', () => {
  // 当屏幕获得焦点时执行的代码
});

// 记得在组件卸载时移除监听器
useEffect(() => {
  return unsubscribe;
}, [unsubscribe]);

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate('Details')}
      />
    </View>
  );
}

function DetailsScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go back"
        onPress={() => navigation.goBack()}
      />
    </View>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}