react-navigation 6.x 学习（3）

Tab navigation
- 基于tab导航的实例
- 自定义外观
- tabs之间跳转
- 每个tab的堆栈导航器
Drawer navigation
- 打开和关闭drawer

Tab navigation

移动应用中最常见的导航是基于Tab的导航。这可以是屏幕底部的标签，也可以标题下面的标签（甚至可以代替标题）。

本指南涵盖了createBottomTabNavigator。您也可以使用createMaterialBottomTabNavigator和createMaterialTopTabNavigator来为您的应用程序添加标签。

在继续之前，首先安装@react-navigation/bottom-tabs:

npm install @react-navigation/bottom-tabs
yarn add @react-navigation/bottom-tabs

基于tab导航的实例

import * as React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';function HomeScreen() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Home!</Text></View>);
}function SettingsScreen() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings!</Text></View>);
}const Tab = createBottomTabNavigator();export default function App() {return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Settings" component={SettingsScreen} /></Tab.Navigator></NavigationContainer>);
}

自定义外观

这类似于您定制堆栈导航器的方式——有些属性是在初始化选项卡导航器时设置的，而其他属性则可以在每个屏幕的选项(options)中定制。

// You can import Ionicons from @expo/vector-icons/Ionicons if you use Expo or
// react-native-vector-icons/Ionicons otherwise.
import Ionicons from 'react-native-vector-icons/Ionicons';// (...)export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={({ route }) => ({tabBarIcon: ({ focused, color, size }) => {let iconName;if (route.name === 'Home') {iconName = focused? 'ios-information-circle': 'ios-information-circle-outline';} else if (route.name === 'Settings') {iconName = focused ? 'ios-list-box' : 'ios-list';}// You can return any component that you like here!return <Ionicons name={iconName} size={size} color={color} />;},tabBarActiveTintColor: 'tomato',tabBarInactiveTintColor: 'gray',})}><Tab.Screen name="Home" component={HomeScreen} /><Tab.Screen name="Settings" component={SettingsScreen} /></Tab.Navigator></NavigationContainer>);
}

1.tabBarIcon是底部标签导航器中支持的选项。所以我们可以在屏幕(Screen)组件的options属性中使用它，但在这里我们选择把它放在Tab的screenOptions属性中。导航器以便集中配置图标。

2.tabBarIcon是一个提供 focused, color, size参数的函数。
3.tabBarActiveTintColor和tabBarInactiveTintColor，可以在这里更改它们颜色。传递给tabBarIcon的颜色是活动的还是非活动的，这取决于聚焦状态(聚焦是活动的)。size是标签栏所期望的图标大小。

给icons添加徽章

有时我们想在一些图标上添加徽章。你可以使用tabBarBadge选项:

<Tab.Screen name="Home" component={HomeScreen} options={{ tabBarBadge: 3 }} />

tabs之间跳转

从一个tab跳转到另一个tab,也是使用 navigation.navigate

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

每个tab的堆栈导航器

每个标签中都有独立的导航栈

import * as React from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';function DetailsScreen() {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Details!</Text></View>);
}function HomeScreen({ navigation }) {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Home screen</Text><Buttontitle="Go to Details"onPress={() => navigation.navigate('Details')}/></View>);
}function SettingsScreen({ navigation }) {return (<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}><Text>Settings screen</Text><Buttontitle="Go to Details"onPress={() => navigation.navigate('Details')}/></View>);
}const HomeStack = createNativeStackNavigator();function HomeStackScreen() {return (<HomeStack.Navigator><HomeStack.Screen name="Home" component={HomeScreen} /><HomeStack.Screen name="Details" component={DetailsScreen} /></HomeStack.Navigator>);
}const SettingsStack = createNativeStackNavigator();function SettingsStackScreen() {return (<SettingsStack.Navigator><SettingsStack.Screen name="Settings" component={SettingsScreen} /><SettingsStack.Screen name="Details" component={DetailsScreen} /></SettingsStack.Navigator>);
}const Tab = createBottomTabNavigator();export default function App() {return (<NavigationContainer><Tab.Navigator><Tab.Screen name="Home" component={HomeStackScreen} /><Tab.Screen name="Settings" component={SettingsStackScreen} /></Tab.Navigator></NavigationContainer>);
}

Drawer navigation

导航中的常见模式是从左边(有时是右边)使用抽屉在屏幕之间导航。

安装

npm install @react-navigation/drawer
yarn add @react-navigation/drawer

也需要安装react-native-gesture-handler and react-native-reanimated.

npm install react-native-gesture-handler react-native-reanimated
或
yarn add react-native-gesture-handler react-native-reanimated

在index.js或App.js中引入文件

import 'react-native-gesture-handler';

基于drawer的实例

import * as React from 'react';
import { Button, View } from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';
import { NavigationContainer } from '@react-navigation/native';function HomeScreen({ navigation }) {return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><ButtononPress={() => navigation.navigate('Notifications')}title="Go to notifications"/></View>);
}function NotificationsScreen({ navigation }) {return (<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}><Button onPress={() => navigation.goBack()} title="Go back home" /></View>);
}const Drawer = createDrawerNavigator();export default function App() {return (<NavigationContainer><Drawer.Navigator initialRouteName="Home"><Drawer.Screen name="Home" component={HomeScreen} /><Drawer.Screen name="Notifications" component={NotificationsScreen} /></Drawer.Navigator></NavigationContainer>);
}

打开和关闭drawer

navigation.openDrawer();
navigation.closeDrawer();

切换drawer

navigation.toggleDrawer();