React Native 导航教程

React Native 是一个用于构建原生移动应用的框架，它允许开发者使用 JavaScript 和 React 来创建 iOS 和 Android 应用。导航是移动应用中不可或缺的一部分，它帮助用户在不同的屏幕之间切换。

基础导航

在 React Native 中，可以使用 react-navigation 库来实现基本的导航功能。

安装

首先，你需要安装 react-navigation：

npm install @react-navigation/native @react-navigation/stack
npm install react-native-screens react-native-safe-area-context

使用 Stack Navigator

Stack Navigator 允许你像浏览器的标签页一样在屏幕之间切换。

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

function App() {
  return (
    <Stack.Navigator initialRouteName="Home">
      <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="Details" component={DetailsScreen} />
    </Stack.Navigator>
  );
}

高级导航

除了基本的 Stack Navigator，React Native 还提供了其他类型的导航器，如 Tab Navigator 和 Drawer Navigator。

Tab Navigator

Tab Navigator 用于在底部或顶部显示多个标签页。

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function App() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
}

Drawer Navigator

Drawer Navigator 用于在屏幕边缘显示一个可滑动的菜单。

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function App() {
  return (
    <Drawer.Navigator>
      <Drawer.Screen name="Home" component={HomeScreen} />
      <Drawer.Screen name="Settings" component={SettingsScreen} />
    </Drawer.Navigator>
  );
}

扩展阅读

更多关于 React Native 导航的教程，请查看React Navigation 官方文档。

React Native Logo