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

一，导航器的分类二，reactnavigation，是react native官方推荐的导航器官网：https://reactnavigation.org/中文官网：https://www.reactnavigation.org.cn/docs/guide-intro1，安装npm install --save react-navigation再安装配套的一些库：npm install react

笑道三千

494人浏览 · 2021-04-21 17:56:32

笑道三千 · 2021-04-21 17:56:32 发布

一，导航器的分类

在这里插入图片描述

二，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文件：按照官网修改即可：
在这里插入图片描述
紧接着，在头部文件（即最顶层的文件（它没有父组件））中引入即可：

然后再在安卓app下的build.gradle进行处理：

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

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.Navigator
          initialRouteName="Home"
          screenOptions={{
            headerTitleAlign: 'center', //标题居中显示
          }}
        >
          <Stack.Screen
            name="Home"
            component={Home}
            options={{
              title: '首页', //重写标题名，默认和name一致
            }}
          />
          <Stack.Screen
            name="Detail"
            component={Detail}
            options={{
              title: '详情页', //重写标题名，默认和name一致
            }}
          />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
}

四，实现点击进入详情页

在这里插入图片描述
首页文件：

实现效果：

设置动画：

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

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

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

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