React Navigation 和 Expo Router

React Navigation 是 React Native 社区最常用的导航库,其具有高度可定制性且性能良好的特性。它提供了一系列导航器(如堆栈导航器、标签导航器、抽屉导航器等),可以满足绝大多数的页面导航需求。

Expo Router 是 Expo 官方最新发布的路由库,它是基于 React Navigation 的再次封装,简化了很多基本的操作,比如不再需要每次在页面中显示的调用具体导航器,只需要在应用的入口配置好路由映射表即可。

安装及使用步骤:以下以 Expo Router 为例介绍其基本的安装和使用步骤:

  1. 安装 Expo Router

使用 npm

npm install expo-router

使用 yarn

yarn add expo-router
  1. 创建路由

在应用的主要入口,如 App.js文件中,创建和配置你的路由。以下是一个简单的路由配置的例子:

import { Router, View } from 'expo-router';
import HomeScreen from './screens/HomeScreen';
import AboutScreen from './screens/AboutScreen';
import ContactScreen from './screens/ContactScreen';

export default function App() {
  return (
    <Router pathMap={{
      '/': HomeScreen,
      '/about': AboutScreen,
      '/contact': ContactScreen,
    }}>
      <View />
    </Router>
  );
}
  1. 在页面中使用路由

在页面组件中,你可以使用 navigate 函数来跳转到其它页面:

import { Text, View } from 'react-native';
import { navigate } from 'expo-router';

export default function HomeScreen() {
  return (
    <View>
      <Text onPress={() => navigate('/about')}>
        Go to About
      </Text>
    </View>
  );
}

以上就是文章全部内容了,如果喜欢这篇文章的话,还希望三连支持一下,感谢!

  • 10
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小纯洁w

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值