React Navigation中StackActions reference

StackActions

---

方法详解：

replace

StackActions.replace('Profile', { user: 'Wojtek' })

默认替换栈顶元素

push

StackActions.push('Profile', { user: 'Wojtek' })

pop

里面的参数是你希望多少screen出栈
StackActions.pop(1)

popToTop

StackActions.popToTop()

---

代码：

import * as React from 'react';
import { View, Button, Text } from 'react-native';
import { NavigationContainer, StackActions } 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="Push Profile on the stack"
        onPress={() =>{
          console.log(StackActions.push('Profile', { user: 'Wojtek' }));
          navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
        }}
      />
      <Button
        title="Replace with Profile"
        onPress={() =>{
          console.log(StackActions.replace('Profile', { user: 'Wojtek' }));
          navigation.dispatch(
            StackActions.replace('Profile', { user: 'Wojtek' })
          )
        }}
      />
    </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="Push same screen on the stack"
        onPress={() => {console(navigation.dispatch(StackActions.pop(1)));navigation.dispatch(StackActions.pop(1))}}
      />
      <Button
        title="Pop one screen from stack"
        onPress={() => {
          console.log(StackActions.push('Profile', { user: 'Wojtek' }));
          navigation.dispatch(StackActions.push('Profile', { user: 'Wojtek' }))
        }}
      />
      <Button
        title="Pop to top"
        onPress={() => {console.log(StackActions.popToTop());navigation.dispatch(StackActions.popToTop())}}
      />
    </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>
  );
}

---

过程详解：

• 当一加载Home主页（navigation）
  
• PUSH PROFILE ON THE STACK
  
  
• PUSH SAME SCREEN ON THE STACK
  
  
• POP SAME SCREEN ON THE STACK
  
• POP TO TOP
  只让最顶上的出栈
  
  
• REPLACE WITH PROFILE
  替换栈顶上的元素