React-Native手写Drawer导航器（自定义侧边栏）

原创

于 2024-04-24 21:47:00 发布 · 566 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#react native #react.js #javascript

本文介绍如何在ReactNative应用中使用自定义组件创建一个支持拖拽交互的Drawer导航器，利用PanResponder和Animated库实现屏幕间的平滑切换。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言

众所周知，React-Native一个Screen下只能有一个导航器，你可以选择Stack、Drawer、Tap其中的一种。当然，如果你要使用多种（两个及以上）的导航器，那么你可以像我一样自定义一个导航器。以下是我手写的Drawer侧边栏，支持拖拽交互，支持作为导航器。废话不多说，先上效果图。

效果图

代码

import React, { useState, useRef } from 'react';
import { View, PanResponder, Animated, StyleSheet, Text, TouchableOpacity } from 'react-native';
import { widthPercentageToDP as wp } from 'react-native-responsive-screen';
import Icon from 'react-native-vector-icons/Ionicons'; // 导入图标组件

const CustomDrawer = () => {
    const [isOpen, setIsOpen] = useState(false);
    const pan = useRef(new Animated.Value(wp(80))).current; // 初始位置设为 wp(80) 因为右移80刚好把宽度为80的drawer隐藏
    const drawerWidth = wp(80);
  
    const panResponder = useRef(

最低0.47元/天解锁文章

200万优质内容无限畅学