一，导航器的分类

二，reactnavigation，是react native官方推荐的导航器

官网：https://reactnavigation.org/
中文官网：https://www.reactnavigation.org.cn/docs/guide-intro

1，安装

建议直接看英文官网https://reactnavigation.org/docs/getting-started，不要看中文网，这个包更新太快了，网上的使用方法有的还是1.x的，至于视频中的写法和官网一致，也是5.x的，我这边刚开始不行，我是直接看官网才知道它少安装了npm install @react-navigation/stack（本文后续会讲到，先知道一下，不用操作）。
第一步：

npm install @react-navigation/native

我安装的版本是5.x版本的，网上中的写法不支持了，可以直接看英文官网来写：

再安装配套的一些库：

npm install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

对于ios的处理：因为我只是练习，且电脑是windows,所以ios的都木有进行，只针对安卓进行学习记录。
对于安卓的处理：视频中有对build.gradel的处理，但是现在官网并没有这一步，应该是官网更新的版本处理了，不再需要这一步处理了。
接下来打开react-native-gesture-handle的官网：
https://docs.swmansion.com/react-native-gesture-handler/docs/#updating-mainactivityjava
这里需要修改android目录下的app>main>mainactivityjava文件：按照官网修改即可：

紧接着，在头部文件（即最顶层的文件（它没有父组件））中引入即可：

接下来，还需要安装这个插件（教程视频中好像少了这个）：

npm install @react-navigation/stack

2，基本使用

第一步，新建两个页面组件

第二步，新建导航器

具体代码：

import React from 'react';
import Home from '@/pages/Home';
import Detail from '@/pages/Detail';
import { NavigationContainer } from '@react-navigation/native';
//管理整个导航树，并包含所有导航器
import { createStackNavigator } from '@react-navigation/stack';
//从堆栈导航器的包中引入这个函数，返回一个对象，此对象中有两个属性，Stack.Navigator和Stack.Screen
/* {Navigator：导航器组件Screen：导航器组件的子组件，用来定义路由（页面）}*/
type RootStackParamList = {Home: undefined;Detail: undefined;
}; //这样设置之后，Stack.Screen的name只能取这两个值
const Stack = createStackNavigator<RootStackParamList>(); //接收它返回的对象值
class Navigator extends React.Component {render() {return (<NavigationContainer><Stack.Navigator initialRouteName="Home">{/* 堆栈的第一层是home页面 */}<Stack.Screen name="Home" component={Home} />{/* component里面的就是名字为home的页面需要渲染的组件 */}<Stack.Screen name="Detail" component={Detail} /></Stack.Navigator></NavigationContainer>);}
}
export default Navigator;

第三步，在src下的index文件中直接引入导出这个，然后根目录引入这个文件

第四步：重新运行项目

三，配置定义导航栏

class Navigator extends React.Component {render() {return (<NavigationContainer><Stack.NavigatorinitialRouteName="Home"screenOptions={{headerTitleAlign: 'center', //标题居中显示}}><Stack.Screenname="Home"component={Home}options={{title: '首页', //重写标题名，默认和name一致}}/><Stack.Screenname="Detail"component={Detail}options={{title: '详情页', //重写标题名，默认和name一致}}/></Stack.Navigator></NavigationContainer>);}
}

四，实现点击进入详情页

首页文件：

实现效果：

设置动画：

有三种类型，可以设置为float.
然后导入使用这个动画样式：

底部主题区域实现卡片滑动效果：

开启安卓端手势滑动效果：

去除安卓头部的阴影样式（像下图这样写，是针对安卓的，如果针对ios,则写个ios的样式就可以）

五，导航器跳转传递参数

导航器除了传递navigation这个参数给组件之外，还传递route这个对象：

react native+typescript创建移动端项目-（慕课网喜马拉雅项目笔记）-（二，导航器navigator）相关推荐

为什么我切换到React Native来创建超级简单的底页
I recently switched jobs, and one of my first tasks was to create a bottom sheet in React Native. 我最 ...
如何在React Native中创建精美的动画加载器
by Vikrant Negi 通过Vikrant Negi 如何在React Native中创建精美的动画加载器 (How to create a beautifully animated load ...
BS1022-基于React native+springboot开发服务端后台实现体育资讯类APP
基于React native的体育资讯类APP的开发目的是方便互联网用户线上接收日常生活中的体育赛事新闻,体育活动新闻,体育赛事直播等,方便人们在体育行业的社交,极大的缩减人们在体育运动方面的距离,也 ...
【慕课网实战课程笔记】Vue.js高仿饿了么外卖App
写在前面:该课程为慕课网付费课程,笔记内容代码居多.内容简略,仅供自己日后翻阅.如有疑问或者不妥,欢迎提出指正,我看到了会回复,谢谢! 第1章:课程简介第2章:Vuejs介绍 Ctrl+Alt+l ...
慕课网实战项目《WebAPP书城整站开发》笔记一：底部边栏样式实现
推荐IMOOC实践课程: <WebAPP 书城整站开发> 效果图下边栏正常状态下边栏变化状态任务分析: ( ...
Java面向对像小项目慕课网Java入门第二季滴滴租车系统
<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255) ...
Java面向对象小项目慕课网Java入门第二季答答租车系统
一.项目背景编写一个控制台程序,要求实现如下功能: 1.展示所有可租车辆 2.选择车型,租车量 3.显示租车清单,包括:总载货量,总载客量,总金额等: 二.车的类别客车:只能载客货车:只能载货 ...
【Vue3.0移动端项目--旅游网】--项目初始化搭建
多一些不为什么的坚持
慕课网android 学习笔记
1.android布局原则: (1)将可复用的组件抽出来并通过include标签使用. (2)使用viewstub标签来加载一些不常用的布局. (3)使用merge标签减少布局的嵌套层次. http: ...
慕课网深入浅出javascript 笔记
javascript 数据类型 5种简单数据类型:Number.String.Boolean.Undefined.Null 1种复杂数据类型:Object = 表示赋值: == 表示比较,但是 ...

react native+typescript创建移动端项目-（慕课网喜马拉雅项目笔记）-（二，导航器navigator）