我的仓库地址：https://gitee.com/ruanjianbianjing/bj-hybrid

react-navigation：

学习文档：https://reactnavigation.org

安装核心包:

npm install @react-navigation/native

安装@react-navigation/native本身依赖的相关包:

• react-native-screens：使用原生代码实现screen容器可以提高性能流畅度
• react-native-safe-area-context：可以让我们的组件渲染在一个安全的区域（比如有些移动设备是异性的，刘海屏、挖孔屏等）

npx expo install react-native-screens react-native-safe-area-context

npm install @react-navigation/native @react-navigation/native-stack @react-navigation/bottom-tabs

入口文件（我的是App.js）引入NavigationContainer
 

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';export default function App() {return (<NavigationContainer>{/* Rest of your app code */}</NavigationContainer>);
}

小图标：
网址：https://icons.expo.fyi/Index

引入方式：

@expo/vector-icons

//举个例子
import { Ionicons } from "@expo/vector-icons";

如何使用堆栈导航器：

安装核心库：
npm install @react-navigation/stack  

目录结构：（创建Home和Detail）

​

home组件：

import { useState } from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';const Home = ({navigation}) => {const goDetail = () => {navigation.navigate('detail', { data: 'pass data' })}return (<View style={{flex: 1}}><Button title='to detail'onPress={goDetail('detail')}/></View>)
}
const styles = StyleSheet.create({});
export default Home

Getail组件：

import React from "react";
import { Text } from "react-native";const Detail = () => {return (<div><Text>详情eee</Text></div>);
};export default Detail;

App.js
 

import { StatusBar, Text, StyleSheet, View } from "react-native";
import "./global";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
//page下的组件
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
//两个小图标
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();
//Screen路由，也是页面
//Navigator导航器export default function App() {return (<NavigationContainer><Tab.Navigator>{/* 首页 */}<Tab.Screen name="homeScreen" component={HomeScreen} />{/* 个人中心页 */}<Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({
});

页面之间实现跳转：

在`Home`组件中，您可以添加一个按钮或者其他交互元素，然后在点击事件中使用`navigation.navigate`方法来进行页面跳转：

import { Button } from 'react-native';

const Home = ({ navigation }) => {
  return (
    <View>
      <Button 
        title="Go to Detail Page" 
        onPress={() => navigation.navigate('detail')} 
      />
    </View>
  );
};

在上面的示例中，当点击按钮时，会调用`navigation.navigate('detail')`来跳转到`Detail`页面。

下面是代码展示：

import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();const HomeScreen = () => {return (<Stack.Navigator><Stack.Screenname="home"component={Home}options={{title: "首页",tarBarIcon: ({ color, size }) => (<AntDesign name="home" size={size} color={color} />),}}/><Stack.Screen name="detail" component={Detail} /></Stack.Navigator>);
};export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={{headerShown: false,}}><Tab.Screenname="homeScreen"component={HomeScreen}options={{title: "首页",tabBarIcon: ({ color, size }) => (<Ionicons name="home" size={size} color={color} />),}}/><Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({});

tips：

headerMode="none"没有标题栏

headerMode="screen"每个页面都有一个标题栏（Android的默认）

使用headerStyle
 

import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();const HomeScreen = () => {return (<Stack.NavigatorscreenOptions={{headerStyle: {backgroundColor: "#f4511e",},headerTitleAlign: "center",headerTintColor: "#fff",headerTitleStyle: {fontWeight: "bold",},}}><Stack.Screenname="home"component={Home}options={{title: "首页",tarBarIcon: ({ color, size }) => (<AntDesign name="home" size={size} color={color} />),}}/><Stack.Screen name="detail" component={Detail} /></Stack.Navigator>);
};const Setting = () => <Text>设置页面</Text>;export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={{headerShown: false,}}><Tab.Screenname="homeScreen"component={HomeScreen}options={{title: "首页",tabBarIcon: ({ color, size }) => (<Ionicons name="home" size={size} color={color} />),}}/><Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({});

页面跳转之间传参，还有隐藏下方的小图标：

import { StatusBar, Text, StyleSheet, View } from "react-native";
// import Home from './src/page/Home';
import "./global";
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
import { NavigationContainer } from "@react-navigation/native";
import { createNativeStackNavigator } from "@react-navigation/native-stack"; //堆栈导航器
import { createBottomTabNavigator } from "@react-navigation/bottom-tabs";
import Home from "./src/page/Home";
import Detail from "./src/page/Detail";
import { AntDesign } from "@expo/vector-icons";
import { Ionicons } from "@expo/vector-icons";const Stack = createNativeStackNavigator();
const Tab = createBottomTabNavigator();const HomeScreen = () => {return (<Stack.NavigatorscreenOptions={{headerStyle: {backgroundColor: "#f4511e",},headerTitleAlign: "center",headerTintColor: "#fff",headerTitleStyle: {fontWeight: "bold",},}}><Stack.Screenname="home"component={Home}options={{title: "首页",tarBarIcon: ({ color, size }) => (<AntDesign name="home" size={size} color={color} />),}}/><Stack.Screen name="detail" component={Detail} /></Stack.Navigator>);
};const Setting = () => <Text>设置页面</Text>;
// 变量
const screens = ["home", "set", "useinfo"];// tabbar是否要显示
const tabbarIsVisible = (route) => {const routeName = getFocusedRouteNameFromRoute(route);// console.log(routeName);return screens.includes(routeName);
};
export default function App() {return (<NavigationContainer><Tab.NavigatorscreenOptions={{headerShown: false,}}><Tab.Screenname="homeScreen"component={HomeScreen}options={// 让options返回函数({ route }) => {//   console.log(route);// 这是一个函数，需要引入,把它移动到上面的tabbarIsVisible函数里面// const routeName = getFocusedRouteNameFromRoute(route);return {// 这行以下是非函数的title: "首页",tabBarIcon: ({ color, size }) => (<Ionicons name="home" size={size} color={color} />),// 每个tab项有一个自己的属性tabBarStyle: {//   display: routeName !== "home" ? "none" : "block",// 换成函数调用display: tabbarIsVisible(route) ? "block" : "none",},};}}/><Tab.Screen name="setting" component={Setting} /></Tab.Navigator><StatusBar /></NavigationContainer>);
}const styles = StyleSheet.create({});

最终效果展示：（视频地址）
https://www.bilibili.com/video/BV1ZJ4m1L7ED/?vd_source=49ac986e62578cbc7593a58345567513