From 1ac533a4f125ac12228ea3f97b396fc8ca07637f Mon Sep 17 00:00:00 2001 From: peihaodong123 Date: Thu, 29 Feb 2024 11:42:17 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I94MW2]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-drawer-layout-polyfill=E6=93=8D=E4=BD=9C=E6=96=87?= =?UTF-8?q?=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-drawer-layout-polyfill.md | 233 +++++++++++++++++++ 1 file changed, 233 insertions(+) create mode 100644 zh-cn/react-native-drawer-layout-polyfill.md diff --git a/zh-cn/react-native-drawer-layout-polyfill.md b/zh-cn/react-native-drawer-layout-polyfill.md new file mode 100644 index 00000000..8bbbd561 --- /dev/null +++ b/zh-cn/react-native-drawer-layout-polyfill.md @@ -0,0 +1,233 @@ +模板版本：v0.1.3 + +

+

react-native-drawer-layout-polyfill

+

+

+ + License + +

+ + +> [!TIP] [Github 地址](https://github.com/rnc-archive/react-native-drawer-layout-polyfill) + +## 安装与使用 + +进入到工程目录并输入以下命令： + + + +#### **npm** + +```bash +npm install react-native-drawer-layout-polyfill@2.0.0 +``` + +#### **yarn** + +```bash +yarn add react-native-drawer-layout-polyfill@2.0.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, { useState, useRef } from "react"; +import { Button, Text, StyleSheet, View, TextInput } from "react-native"; +import DrawerLayout from 'react-native-drawer-layout-polyfill'; + +const App = () => { + const drawerLayoutRef = useRef(null) + const [drawerPosition, setDrawerPosition] = useState("left"); + const [keyboardDismissMode, setKeyboardDismissMode] = useState("none"); + const [drawerLockMode, setDrawerLockMode] = useState("unlocked "); + const [isOpen, setIsOpen] = useState("关闭 "); + const [drawerSlideOutput, setDrawerSlideOutput] = useState(""); + const [drawerStateChangedOutput, setDrawerStateChangedOutput] = useState(""); + const [drawerWidth, setDrawerWidth] = useState(300); + const [value, onChangeText] = useState(""); + + + const open = () =>{ + drawerLayoutRef.current.openDrawer() + } + + const close = () =>{ + drawerLayoutRef.current.closeDrawer() + } + + const changeDrawerPosition = () => { + console.log('drawerPosition-修改弹框位置', drawerPosition); + if (drawerPosition === "left") { + setDrawerPosition("right"); + } else { + setDrawerPosition("left"); + } + }; + + const changeDrawerHideKeyboard = () => { + console.log('keyboardDismissMode-是否隐藏软键盘', keyboardDismissMode); + if (keyboardDismissMode === "none") { + setKeyboardDismissMode("on-drag"); + } else { + setKeyboardDismissMode("none"); + } + }; + + const changeDrawerWidth = () => { + console.log('drawerWidth-修改弹框宽度', drawerWidth); + if(value && Number(value) >= 100 ) { + setDrawerWidth(Number(value)) + } + } + + const changeDrawerLockMode = (type) => { + console.log('drawerLockMode-修改弹框锁定模式', type); + setDrawerLockMode(type) + }; + + const handleDrawerOpen = (e) =>{ + console.log('onDrawerOpen-打开弹框的回调'); + setIsOpen('打开') + } + + const handleDrawerClose = (e) =>{ + console.log('onDrawerClose-关闭弹框的回调'); + setIsOpen('关闭') + } + + const handleDrawerSlide = (e) =>{ + console.log('onDrawerSlide-导航视图发生交互时的回调函数'); + setDrawerSlideOutput(JSON.stringify(e.nativeEvent)) + } + + const handleDrawerStateChanged = (e) =>{ + console.log('onDrawerStateChanged-导航视图的状态发生变化时的回调函数'); + setDrawerStateChangedOutput(JSON.stringify(e)) + } + + + const navigationView = ( + + I'm in the Drawer! + 弹框状态:{isOpen} + 弹框打开关闭过程中触发:{drawerSlideOutput} + 弹框状态切换触发:{drawerStateChangedOutput} +