####1 安装 依赖
npm install @react-navigation/native
npm install @react-navigation/stack
npm install @react-navigation/bottom-tabs
npm install @react-navigation/material-top-tabs react-native-tab-view
//原生导航
//堆栈导航
//底部导航
//顶部安卓导航
npm install
react-native-reanimated
react-native-gesture-handler
react-native-screens
react-native-safe-area-context @react-native-community/masked-view
####2 创建一个堆栈导航器
createStackNavigator是一个返回包含2个属性的对象的函数:Screen和Navigator。它们都是用于配置导航器的React组件。的元素Navigator应Screen作为其子元素来定义路由的配置。
NavigationContainer是管理导航树并包含导航状态的组件。该组件必须包装所有导航器结构。通常,我们会在应用程序的根目录下渲染此组件,通常是从导出的组件App.js。
// In App.js in a new project
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen() {
return (
<View style={
{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Home Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="Home" component={HomeScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
####3 配置导航器
所有路由配置都指定为导航器的道具。我们尚未将任何道具传递给导航器,因此它仅使用默认配置。
让我们向堆栈导航器添加第二个屏幕,并将该Home屏幕配置为首先呈现:
function DetailsScreen() {
return (
<View style={
{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home">
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="Details" component={DetailsScreen} />
</Stack.Navigator>