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>
);
}
效果如图:
至此,三大组件的基本使用已经明白了,后面的对组件进行修改,自定义等等,以后再更吧!
最好的学习方式就是去官网,官网上讲的很清楚。