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
替换栈顶上的元素