React

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > React > React Navigation导航与路由

React Navigation导航与路由的使用小结

作者：光影少年

在React Native中,导航与路由通常指页面之间的跳转和页面栈管理,本文就来详细的介绍一下React Navigation导航与路由的使用小结,感兴趣的可以了解一下

在 React Native（RN）中，“导航与路由”通常指页面之间的跳转和页面栈管理。当前最主流的方案是：

官方推荐的社区导航库：

React Navigation 官网

安装：

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

1. Stack（栈导航）

适用于：

示例：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <Button
      title="进入详情页"
      onPress={() =>
        navigation.navigate('Detail', { id: 1001 })
      }
    />
  );
}

function DetailScreen({ route }) {
  return (
    <Text>ID: {route.params.id}</Text>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          component={HomeScreen}
        />
        <Stack.Screen
          name="Detail"
          component={DetailScreen}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

跳转：

navigation.navigate('Detail');

返回：

navigation.goBack();

2. Tab（底部导航）

适用于：

安装：

npm install @react-navigation/bottom-tabs

示例：

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

const Tab = createBottomTabNavigator();

function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="首页" component={HomeScreen} />
        <Tab.Screen name="我的" component={ProfileScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

效果：

┌─────────────┐
│     内容     │
├─────────────┤
│ 首页 | 我的  │
└─────────────┘

3. Drawer（侧边栏导航）

适用于：

安装：

npm install @react-navigation/drawer

示例：

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

const Drawer = createDrawerNavigator();

function App() {
  return (
    <NavigationContainer>
      <Drawer.Navigator>
        <Drawer.Screen name="首页" component={HomeScreen} />
        <Drawer.Screen name="设置" component={SettingScreen} />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

4. 路由参数传递

发送参数：

navigation.navigate('Detail', {
  id: 1001,
  title: '商品详情'
});

接收参数：

function DetailScreen({ route }) {
  const { id, title } = route.params;

  return (
    <Text>{title}</Text>
  );
}

5. 嵌套路由

实际项目常见结构：

RootStack
├── Login
└── MainTabs
    ├── Home
    ├── Message
    └── Mine

示例：

<Stack.Navigator>
  <Stack.Screen
    name="Main"
    component={TabNavigator}
  />
  <Stack.Screen
    name="Detail"
    component={DetailScreen}
  />
</Stack.Navigator>

从 Tab 页面直接跳详情：

navigation.navigate('Detail');

6. TypeScript 路由类型

推荐在 RN 项目中使用：

export type RootStackParamList = {
  Home: undefined;
  Detail: {
    id: number;
  };
};

页面：

type Props = NativeStackScreenProps<
  RootStackParamList,
  'Detail'
>;

这样可以获得：

React Native 导航方案对比

方案推荐度特点
React Navigation⭐⭐⭐⭐⭐社区主流，功能完整
Expo Router⭐⭐⭐⭐⭐文件路由，类似 Next.js
React Native Navigation⭐⭐⭐⭐原生性能更强，配置复杂
Wix Navigation⭐⭐⭐⭐大型应用常用

到此这篇关于React Navigation导航与路由的使用小结的文章就介绍到这了,更多相关React Navigation导航与路由内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:
阅读全文