您的位置:首页 > 健康 > 养生 > React Navigation 和 Expo Router

React Navigation 和 Expo Router

2024/10/5 22:31:55 来源:https://blog.csdn.net/weixin_43891869/article/details/140142304  浏览:    关键词: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>);
}

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

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com