配置导航堆栈
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
const Stack = createStackNavigator(); // createStackNavigator是一个返回包含2个属性的对象的函数:Screen和Navigator。
function HomeScreen() {
return (
<Tab.Navigator>
<Tab.Screen name="Feed" component={Feed} />
<Tab.Screen name="Messages" component={Messages} />
</Tab.Navigator>
);
}
function DetailsScreen({ navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
<Button
title="Go to Details... again"
onPress={() => navigation.push('Details')}
/>
<Button title="Go to Home" onPress={() => navigation.navigate('Home')} />
<Button title="Go back" onPress={() => navigation.goBack()} />
<Button
title="Go back to first screen in stack"
onPress={() => navigation.popToTop()}
/>
</View>
);
}
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home"> {/* initialRouteName指定首先呈现的屏幕 */}
{/* options选项可以指定一些选项 */}
<Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Overview' }} />
{/* 传递额外的道具 */}
<Stack.Screen name="Details">
{props => <DetailsScreen {...props} extraData={someData} />}
</Stack.Screen>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
options 配置
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ title: 'Awesome app' }}
/>
<Stack.Screen
name="Profile"
component={ProfileScreen}
options={{ title: 'My profile' }}
/>
</Stack.Navigator>
// 还可以将该Screen的navigation和route传给options
<Stack.Screen
name="Home"
component={HomeScreen}
options={({ navigation }) => ({
title: 'Awesome app',
headerLeft: () => (
<DrawerButton onPress={() => navigation.toggleDrawer()} />
),
})}
/>
// screenOptions适用于导航器中的所有屏幕,和options类似,这个函数也可以接收每个Screen的navigation和route
<Stack.Navigator
screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Profile" component={ProfileScreen} />
</Stack.Navigator>
props
tabBarVisible: 显示或隐藏标签栏
headerShown: 是否显示或隐藏屏幕的标题
animationEnabled: 是否应在屏幕上启用过渡动画
gestureEnabled: 此屏幕是否可以使用手势
更多props看:
https://reactnavigation.org/docs/stack-navigator
https://reactnavigation.org/docs/bottom-tab-navigator/#options
用 navigation.setOptions({ … }) 可以更新
注意 想在组件中更新tabBarVisible要这样:
props.navigation.dangerouslyGetParent().setOptions({
tabBarVisible: !value
})
https://reactnavigation.org/docs/navigation-prop/#dangerouslygetparent
Screen之间的跳转
navigation属性会传递到堆栈导航器中的每个屏幕组件
使用navigation.navigate(ScreenName)方法可以进行页面跳转。
每次进行跳转操作时,会检查导航堆栈中是否具有该名称的现有路由,如果没有会向堆栈push这条新路由。
navigation.popToTop(),可以返回到堆栈中的第一个屏幕。
navigation.goBack(),当可以从活动屏幕返回时,堆栈导航器提供的标题将自动包含一个后退按钮(如果导航堆栈中只有一个屏幕,则无法返回任何内容,因此没有返回键)。
将参数传递给嵌套导航器中的屏幕
navigation.navigate('Home', {
screen: 'Messages',
initial: false,
params: { user: 'jane' },
});