📜  反应导航 - Javascript (1)

📅  最后修改于: 2023-12-03 14:50:34.576000             🧑  作者: Mango

反应导航 - Javascript

简介

React Navigation是一个用于React Native应用程序中的导航库。React Navigation使得在手机应用程序中定义屏幕并在它们之间进行导航变得非常容易。

特点
  • React Navigation为多种设备提供了一致的导航体验。
  • 你可以很容易地在你的应用程序中定义屏幕和它们之间的导航。
  • React Navigation具有灵活性,以适应不同类型的导航需求。
安装

使用npm进行安装:

npm install @react-navigation/native

使用expo-cli进行安装:

expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view
示例
import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';
import HomeScreen from './HomeScreen';
import DetailScreen from './DetailScreen';

const MainNavigator = createStackNavigator({
  Home: {screen: HomeScreen},
  Detail: {screen: DetailScreen},
});

const App = createAppContainer(MainNavigator);

export default App;

该文件定义了两个屏幕 - HomeScreen和DetailScreen - 以及它们之间的导航。createStackNavigator函数将这些屏幕包装在一起,以便它们之间的切换变得容易。

参考资料