代码：

import * as React from 'react';
import {View, Button, Text} from 'react-native';
import {NavigationContainer, CommonActions} from '@react-navigation/native';
import {createStackNavigator} from '@react-navigation/stack';

function HomeScreen({navigation}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Home!</Text>
      <Button
        title="Navigate to Profile"
        onPress={() => {
          console.log(
            CommonActions.navigate({name: 'Profile', params: {user: 'jane'}}),
          );
          navigation.dispatch(
            CommonActions.navigate({
              name: 'Profile',
              params: {
                user: 'jane',
              },
            }),
          );
        }}
      />
      <Button
        title="Go back"
        onPress={() => {
          console.log(CommonActions.goBack());
          navigation.dispatch(CommonActions.goBack());
        }}
      />
    </View>
  );
}

function ProfileScreen({navigation, route}) {
  return (
    <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
      <Text>Profile!</Text>
      <Text>{route.params.user}'s profile</Text>
      <Button
        title="Navigate to Home"
        onPress={() => {
          console.log(
            CommonActions.navigate({
              name: 'Home',
            }),
          );
          navigation.dispatch(
            CommonActions.navigate({
              name: 'Home',
            }),
          );
        }}
      />
      <Button
        title="Reset navigation state"
        onPress={() => {
          navigation.dispatch(
            CommonActions.reset({
              index: 1,
              routes: [
                {
                  name: 'Profile',
                  params: {user: 'jane', key: route.params.key},
                },
                {name: 'Home'},
              ],
            }),
          );
          console.log(
            CommonActions.reset({
              index: 1,
              routes: [
                {
                  name: 'Profile',
                  params: {user: 'jane', key: route.params.key},
                },
                {name: 'Home'},
              ],
            }),
          );
        }}
      />
      <Button
        title="Change user param"
        onPress={() => {
          console.log({
            ...CommonActions.setParams({user: 'Wojtek'}),
            source: route.key,
          });
          navigation.dispatch({
            ...CommonActions.setParams({user: 'Wojtek'}),
            source: route.key,
          });
        }}
      />
      <Button
        title="Go back"
        onPress={() => {
          console.log(CommonActions.goBack());
          navigation.dispatch({
            ...CommonActions.goBack(),
            source: route.key,
            target: route?.params?.key,
          });
        }}
      />
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer
      onStateChange={state => {
        console.log(state);
      }}>
      <Stack.Navigator
        screenOptions={navigation => {
          console.log(navigation);
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

---

页面显示：

---

CommonAction方法详解

CommonActions.navigate

console.log(
   CommonActions.navigate({name: 'Profile', params: {user: 'jane'}}),
);

CommonActions.navigate({
    name: 'Home',
})

---

CommonActions.reset

CommonActions.reset({
  index: 1,
  routes: [
    {
      name: 'Profile',
      params: {user: 'jane', key: route.params.key},
    },
    {name: 'Home'},
  ],
});

---

CommonActions.setParams

{
    ...CommonActions.setParams({user: 'Wojtek'}),
    source: route.key,
}

---

CommonActions.goBack

CommonActions.goBack()

---

onStateChange和screenOptions方法

export default function App() {
  return (
    <NavigationContainer
      onStateChange={state => {
        console.log(state);
      }}>
      <Stack.Navigator
        screenOptions={navigation => {
          console.log(navigation);
        }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Profile" component={ProfileScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

onStateChange

参数详解：

• routeNames：代表所有路由的名称（跟当前的路由栈无关）
• routes：代表当前的路由栈，显示栈区的最后一个页面，如果栈区只有一个页面，无法goBack，

如果路由栈发生变化：
1. 页面的跳转
2. params参数的变化
就会调用这个方法更新路由栈

screenOptions

参数详解：

• navigation: 保存着很多方法来对路由栈进行操作
• route: 保存当前页面状态（key，name，params）

页面本身的状态发生变化（name，params）
跳转到某个页面
都会调用这个方法

点击按钮过程详解：

• 主页一加载（页面的navigation）
  
• 点击NAVIGATE TO PROFILE

  console.log(
    CommonActions.navigate({name: 'Profile', params: {user: 'jane'}}),
  );
  

  
• RESET NAVIGATION STATE重置state

  console.log(
    CommonActions.reset({
      index: 1,
      routes: [
        {
          name: 'Profile',
          params: {user: 'jane', key: route.params.key},
        },
        {name: 'Home'},
      ],
    }),
  )
  

• CHANGE USER PARAM-更改页面的params

  console.log({
    ...CommonActions.setParams({user: 'Wojtek'}),
    source: route.key,
  });
  

  
• GO Back