React Navigation 6.x使用_DeepLiao

irpas 02-07 2784

React Navigation 6.x使用详解

实验室最近两个项目都用到了React Navigation，配置的时候发现很多教程都比较老了，许多停留在4.x的时候，现在已经更新到了6.x，安装的方式，使用的方式早已经发生了变化。无奈只能去官网查看，进行配置，并做一个记录。

React Navigation安装 yarn add @react-navigation/native

4.x的时候的安装方式是yarn add react-navigation，而最新的如上述. 安装一些依赖

yarn add react-native-screens react-native-safe-area-context

4.x的时候的安装方式是yarn add react-navigation，而最新的如上述。

React Navigation常用有三个组件，其中Stack用于实现页面跳转，Tab用于标签页之间切换，Drawer用于实现抽屉式侧边栏。

Stack Navigation

用于实现在不同页面的跳转，就像浏览器那样，用一个栈保存浏览页面。当你打开一个新页面时，将页面压入栈顶，当你需要返回时，从栈顶弹出页面。安装如下：

yarn add @react-navigation/native-stack

官网上给了这样一段话: createNativeStackNavigator is a function that returns an object containing 2 properties: Screen and Navigator. Both of them are React components used for configuring the navigator. The Navigator should contain Screen elements as its children to define the configuration for routes. 翻译：createNativeStackNavigator 是一个函数，它返回一个包含 2 个属性的对象：Screen 和 Navigator。它们都是用于配置导航器的 React 组件。 Navigator 应该包含 Screen 元素作为它的子元素来定义路由的配置。这段话告诉了Navigator和Screen之间的关系，这个关系是通用的。

在两个页面之间跳转: import * as React from 'react'; import { Button, View, Text } from 'react-native'; //导入所需的组件 import { NavigationContainer } from '@react-navigation/native'; import { createNativeStackNavigator } from '@react-navigation/native-stack'; //Home页面，也可以用类式声明引入 function HomeScreen({ navigation }) { //传入了navigation，用于定义导航 return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Home Screen</Text> <Button title="Go to Details" onPress={() => navigation.navigate('Details')} /> </View> ); } function DetailsScreen() { return ( <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}> <Text>Details Screen</Text> </View> ); } const Stack = createNativeStackNavigator(); function App() { return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home">//initialRouteName 默认的页面 <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Details" component={DetailsScreen} /> </Stack.Navigator> </NavigationContainer> ); } export default App; Tab Navigation

React Navigation提供了TabNavigator来实现不同标签页之间的跳转。安卓的标签栏默认显示在头部，IOS在底部。

yarn add @react-navigation/bottom-tabs 底部导航栏 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(); function MyTabs() { return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> ); } export default function App() { return ( <NavigationContainer> <MyTabs /> </NavigationContainer> ); }

默认是Home界面，点击Settings跳转到Settings页面，可以根据自己情况添加页面。

Drawer Navigation

DrawerNavigator用于实现屏幕侧边栏拉出的导航效果，需要安装下面的依赖

npm install @react-navigation/drawer Drawer Example 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' }}> <Button onPress={() => 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> ); }

效果如图: 至此，三大组件的基本使用已经明白了，后面的对组件进行修改，自定义等等，以后再更吧！

最好的学习方式就是去官网，官网上讲的很清楚。