From 56268b8398a59e2a147f3d2198e32512d4520c27 Mon Sep 17 00:00:00 2001 From: yuxingchuang Date: Tue, 16 Apr 2024 20:03:11 +0800 Subject: [PATCH] =?UTF-8?q?[Issues:=20#I9H0QZ]=20=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E4=BB=A3=E7=A0=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 16 + _sidebar.md | 19 + zh-cn/README.md | 16 + {1224 => zh-cn}/react-native-aria.md | 93 +-- {1224 => zh-cn}/react-native-blob-util.md | 664 ++++++++++-------- {1224 => zh-cn}/react-native-drag-sort.md | 498 ++++++------- {1224 => zh-cn}/react-native-fs.md | 241 +++---- ...react-native-keyboard-aware-scroll-view.md | 40 +- {1224 => zh-cn}/react-native-mjrefresh.md | 93 ++- {1224 => zh-cn}/react-native-permissions.md | 32 +- {1224 => zh-cn}/react-native-progress.md | 0 .../react-native-reanimated-carousel.md | 33 +- {1224 => zh-cn}/react-native-sound.md | 72 +- {1224 => zh-cn}/react-native-text-size.md | 25 +- {1224 => zh-cn}/react-redux.md | 129 ++-- {1224 => zh-cn}/react-router-dom.md | 31 +- {1224 => zh-cn}/redux-actions.md | 219 +++--- {1224 => zh-cn}/redux-thunk.md | 45 +- {1224 => zh-cn}/toolbar-android.md | 87 +-- 19 files changed, 1266 insertions(+), 1087 deletions(-) rename {1224 => zh-cn}/react-native-aria.md (81%) rename {1224 => zh-cn}/react-native-blob-util.md (47%) rename {1224 => zh-cn}/react-native-drag-sort.md (58%) rename {1224 => zh-cn}/react-native-fs.md (53%) rename {1224 => zh-cn}/react-native-keyboard-aware-scroll-view.md (55%) rename {1224 => zh-cn}/react-native-mjrefresh.md (82%) rename {1224 => zh-cn}/react-native-permissions.md (93%) rename {1224 => zh-cn}/react-native-progress.md (100%) rename {1224 => zh-cn}/react-native-reanimated-carousel.md (79%) rename {1224 => zh-cn}/react-native-sound.md (89%) rename {1224 => zh-cn}/react-native-text-size.md (94%) rename {1224 => zh-cn}/react-redux.md (60%) rename {1224 => zh-cn}/react-router-dom.md (69%) rename {1224 => zh-cn}/redux-actions.md (34%) rename {1224 => zh-cn}/redux-thunk.md (70%) rename {1224 => zh-cn}/toolbar-android.md (86%) diff --git a/README.md b/README.md index f7040174..7d403162 100644 --- a/README.md +++ b/README.md @@ -93,6 +93,22 @@ | 71 | [redux](https://github.com/reduxjs/redux) | 5.0.1 | - | [redux](https://github.com/reduxjs/redux/releases) | [链接](/zh-cn/redux.md) | | 72 | [redux-logger](https://github.com/LogRocket/redux-logger) | 3.0.6 | - | [redux-logger](https://github.com/LogRocket/redux-logger/releases) | [链接](/zh-cn/redux-logger.md) | | 73 | [redux-persist](https://github.com/rt2zz/redux-persist) | 6.0.0 | - | [redux-persist](https://github.com/rt2zz/redux-persist/releases) | [链接](/zh-cn/redux-persist.md) | +| 74 | [react-native-text-size](https://github.com/react-native-oh-library/react-native-text-size) | 4.0.0 | - | [react-native-text-size](https://github.com/react-native-oh-library/react-native-text-size/releases) | [链接](/zh-cn/react-native-text-size.md) | +| 75 | [react-router-dom](https://github.com/remix-run/react-router) | 6.22.3 | - | [react-router-dom](https://github.com/remix-run/react-router/releases) | [链接](/zh-cn/react-router-dom.md) | +| 76 | [redux-actions](https://github.com/redux-utilities/redux-actions) | 3.0.0 | - | [redux-actions](https://github.com/redux-utilities/redux-actions/releases) | [链接](/zh-cn/redux-actions.md) | +| 77 | [redux-thunk](https://github.com/reduxjs/redux-thunk) | 3.1.0 | - | [redux-thunk](https://github.com/reduxjs/redux-thunk/releases) | [链接](/zh-cn/redux-thunk.md) | +| 78 | [react-native-aria](https://github.com/gluestack/react-native-aria/tree/v0.2.4) | 0.2.4 | - | [react-native-aria](https://github.com/gluestack/react-native-aria/releases) | [链接](/zh-cn/react-native-aria.md) | +| 79 | [react-native-progress](https://github.com/react-native-oh-library/react-native-progress) | 5.0.1 | - | [react-native-progress](https://github.com/react-native-oh-library/react-native-progress/releases) | [链接](/zh-cn/react-native-progress.md) | +| 80 | [react-native-fs](https://github.com/react-native-oh-library/react-native-fs) | 2.20.0 | - | [react-native-fs](https://github.com/react-native-oh-library/react-native-fs/releases) | [链接](/zh-cn/react-native-fs.md) | +| 81 | [react-native-keyboard-aware-scroll-view](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view) | 0.9.5 | - | [react-native-keyboard-aware-scroll-view](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases) | [链接](/zh-cn/react-native-keyboard-aware-scroll-view.md) | +| 82 | [react-native-permissions](https://github.com/react-native-oh-library/react-native-permissions) | 4.1.5 | - | [react-native-permissions](https://github.com/react-native-oh-library/react-native-permissions/releases) | [链接](zh-cn/react-native-permissions.md) | +| 83 | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort) | 2.4.4 | - | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort/releases) | [链接](zh-cn/react-native-drag-sort.md) | +| 84 | [react-native-sound](https://github.com/react-native-oh-library/react-native-sound) | 0.11.2 | - | [react-native-sound](https://github.com/react-native-oh-library/react-native-sound/releases) | [链接](zh-cn/react-native-sound.md) | +| 85 | [rn-fetch-blob](https://github.com/react-native-oh-library/react-native-blob-util) | 0.19.9 | - | [react-native-sound](https://github.com/react-native-oh-library/react-native-blob-util/releases) | [链接](zh-cn/rn-fetch-blob.md) | +| 86 | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel) | 3.5.1 | - | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel/releases) | [链接](zh-cn/react-native-reanimated-carousel.md) | +| 87 | [react-native-toolbar-android](https://github.com/react-native-oh-library/toolbar-android) | 0.2.1 | - | [toolbar-android](https://github.com/react-native-oh-library/toolbar-android/releases) | [链接](zh-cn/toolbar-android.md) | +| 88 | [react-redux](https://github.com/reduxjs/react-redux) | 9.1.1 | - | [react-redux](https://github.com/reduxjs/react-redux/releases) | [链接](zh-cn/react-redux.md) | +| 89 | [react-native-MJRefresh](https://github.com/react-native-oh-library/react-native-MJRefresh) | 0.7.0 | - | [react-native-MJRefresh](https://github.com/react-native-oh-library/react-native-MJRefresh/releases) | [链接](zh-cn/react-native-MJRefresh.md) | ## 社区 diff --git a/_sidebar.md b/_sidebar.md index b2626402..b63e6c1f 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -37,6 +37,14 @@ - [react-native-cookies](/zh-cn/react-native-cookies.md) - [react-native-maps](/zh-cn/react-native-maps.md) - [react-native-pdf](/zh-cn/react-native-pdf.md) + - [react-native-text-size](/zh-cn/react-native-text-size.md) + - [react-native-fs](/zh-cn/react-native-fs.md) + - [react-native-permissions](/zh-cn/react-native-permissions.md) + - [react-native-sound](/zh-cn/react-native-sound.md) + - [react-native-blob-util](/zh-cn/react-native-blob-util.md) + - [react-native-reanimated-carousel](/zh-cn/react-native-reanimated-carousel.md) + - [toolbar-android](/zh-cn/toolbar-android.md) + - [react-native-mjrefresh](/zh-cn/react-native-mjrefresh.md) - RN JS库 - [lottie-react-native](/zh-cn/lottie-react-native.md) - [react-i18next](/zh-cn/react-i18next.md) @@ -64,6 +72,10 @@ - [react-native-snap-carousel](/zh-cn/react-native-snap-carousel.md) - [react-native-transitiongroup](/zh-cn/react-native-transitiongroup.md) - [react-native-translucent-modal](/zh-cn/react-native-translucent-modal.md) + - [react-native-aria](/zh-cn/react-native-aria.md) + - [react-native-progress](/zh-cn/react-native-progress.md) + - [react-native-keyboard-aware-scroll-view](/zh-cn/react-native-keyboard-aware-scroll-view.md) + - [react-redux](/zh-cn/react-redux.md) - 纯JS库 - [crypto-js](/zh-cn/crypto-js.md) - [deepmerge](/zh-cn/deepmerge.md) @@ -80,3 +92,10 @@ - [redux-logger](/zh-cn/redux-logger.md) - [redux-persist](/zh-cn/redux-persist.md) - [qrcode-generator](/zh-cn/qrcode-generator.md) + - [react-router-dom](/zh-cn/react-router-dom.md) + - [redux-actions](/zh-cn/redux-actions.md) + - [redux-thunk](/zh-cn/redux-thunk.md) + - [react-native-drag-sort](/zh-cn/react-native-drag-sort.md) + + + diff --git a/zh-cn/README.md b/zh-cn/README.md index 7821c36c..427d408f 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -93,6 +93,22 @@ | 71 | [redux](https://github.com/reduxjs/redux) | 5.0.1 | - | [redux](https://github.com/reduxjs/redux/releases) | [链接](/zh-cn/redux.md) | | 72 | [redux-logger](https://github.com/LogRocket/redux-logger) | 3.0.6 | - | [redux-logger](https://github.com/LogRocket/redux-logger/releases) | [链接](/zh-cn/redux-logger.md) | | 73 | [redux-persist](https://github.com/rt2zz/redux-persist) | 6.0.0 | - | [redux-persist](https://github.com/rt2zz/redux-persist/releases) | [链接](/zh-cn/redux-persist.md) | +| 74 | [react-native-text-size](https://github.com/react-native-oh-library/react-native-text-size) | 4.0.0 | - | [react-native-text-size](https://github.com/react-native-oh-library/react-native-text-size/releases) | [链接](/zh-cn/react-native-text-size.md) | +| 75 | [react-router-dom](https://github.com/remix-run/react-router) | 6.22.3 | - | [react-router-dom](https://github.com/remix-run/react-router/releases) | [链接](/zh-cn/react-router-dom.md) | +| 76 | [redux-actions](https://github.com/redux-utilities/redux-actions) | 3.0.0 | - | [redux-actions](https://github.com/redux-utilities/redux-actions/releases) | [链接](/zh-cn/redux-actions.md) | +| 77 | [redux-thunk](https://github.com/reduxjs/redux-thunk) | 3.1.0 | - | [redux-thunk](https://github.com/reduxjs/redux-thunk/releases) | [链接](/zh-cn/redux-thunk.md) | +| 78 | [react-native-aria](https://github.com/gluestack/react-native-aria/tree/v0.2.4) | 0.2.4 | - | [react-native-aria](https://github.com/gluestack/react-native-aria/releases) | [链接](/zh-cn/react-native-aria.md) | +| 79 | [react-native-progress](https://github.com/react-native-oh-library/react-native-progress) | 5.0.1 | - | [react-native-progress](https://github.com/react-native-oh-library/react-native-progress/releases) | [链接](/zh-cn/react-native-progress.md) | +| 80 | [react-native-fs](https://github.com/react-native-oh-library/react-native-fs) | 2.20.0 | - | [react-native-fs](https://github.com/react-native-oh-library/react-native-fs/releases) | [链接](/zh-cn/react-native-fs.md) | +| 81 | [react-native-keyboard-aware-scroll-view](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view) | 0.9.5 | - | [react-native-keyboard-aware-scroll-view](https://github.com/react-native-oh-library/react-native-keyboard-aware-scroll-view/releases) | [链接](/zh-cn/react-native-keyboard-aware-scroll-view.md) | +| 82 | [react-native-permissions](https://github.com/react-native-oh-library/react-native-permissions) | 4.1.5 | - | [react-native-permissions](https://github.com/react-native-oh-library/react-native-permissions/releases) | [链接](zh-cn/react-native-permissions.md) | +| 83 | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort) | 2.4.4 | - | [react-native-drag-sort](https://github.com/mochixuan/react-native-drag-sort/releases) | [链接](zh-cn/react-native-drag-sort.md) | +| 84 | [react-native-sound](https://github.com/react-native-oh-library/react-native-sound) | 0.11.2 | - | [react-native-sound](https://github.com/react-native-oh-library/react-native-sound/releases) | [链接](zh-cn/react-native-sound.md) | +| 85 | [rn-fetch-blob](https://github.com/react-native-oh-library/react-native-blob-util) | 0.19.9 | - | [react-native-sound](https://github.com/react-native-oh-library/react-native-blob-util/releases) | [链接](zh-cn/rn-fetch-blob.md) | +| 86 | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel) | 3.5.1 | - | [react-native-reanimated-carousel](https://github.com/dohooo/react-native-reanimated-carousel/releases) | [链接](zh-cn/react-native-reanimated-carousel.md) | +| 87 | [react-native-toolbar-android](https://github.com/react-native-oh-library/toolbar-android) | 0.2.1 | - | [toolbar-android](https://github.com/react-native-oh-library/toolbar-android/releases) | [链接](zh-cn/toolbar-android.md) | +| 88 | [react-redux](https://github.com/reduxjs/react-redux) | 9.1.1 | - | [react-redux](https://github.com/reduxjs/react-redux/releases) | [链接](zh-cn/react-redux.md) | +| 89 | [react-native-MJRefresh](https://github.com/react-native-oh-library/react-native-MJRefresh) | 0.7.0 | - | [react-native-MJRefresh](https://github.com/react-native-oh-library/react-native-MJRefresh/releases) | [链接](zh-cn/react-native-MJRefresh.md) | ## 社区 diff --git a/1224/react-native-aria.md b/zh-cn/react-native-aria.md similarity index 81% rename from 1224/react-native-aria.md rename to zh-cn/react-native-aria.md index ec12ad9f..9e505a98 100644 --- a/1224/react-native-aria.md +++ b/zh-cn/react-native-aria.md @@ -12,7 +12,6 @@

- > [!tip] [Github 地址](https://github.com/gluestack/react-native-aria/tree/v0.2.4) ## 安装与使用 @@ -20,11 +19,13 @@ React Native ARIA是可增量采用的。每个组件都作为单独的包发布，因此您可以在单个组件中使用它，并随着时间的推移逐渐添加更多组件。所有这些包都在npm上的@react-native-aria范围内发布。 进入到工程目录并输入以下命令： + #### **yarn** ```bash yarn add @react-native-aria/button@0.2.2 ``` + #### **npm** @@ -32,15 +33,17 @@ yarn add @react-native-aria/button@0.2.2 ```bash npm install @react-native-aria/button@0.2.2 ``` - + 除了单独的包之外，我们还提供了一个总包，其中包含所有React Native ARIA hooks + #### **yarn** ```bash yarn add react-native-aria@0.2.2 ``` + #### **npm** @@ -48,12 +51,13 @@ yarn add react-native-aria@0.2.2 ```bash npm install react-native-aria@0.2.2 ``` + 下面的代码展示了useToggleButton的基本使用场景： ```js -import React from 'react'; +import React from "react"; import { useToggleButton } from "@react-native-aria/button"; import { Pressable, Text, View } from "react-native"; import { useToggleState } from "@react-stately/toggle"; @@ -62,7 +66,7 @@ import { useRef } from "react"; export function ToggleButton(props) { const ref = useRef(null); let state = useToggleState(props); - let { buttonProps, isPressed } = useToggleButton(props, state, ref);//useToggleButton 是一个用于创建可切换按钮的 Hook，接受三个参数 + let { buttonProps, isPressed } = useToggleButton(props, state, ref); //useToggleButton 是一个用于创建可切换按钮的 Hook，接受三个参数 return ( @@ -94,14 +98,15 @@ export function ToggleButton(props) { export default function AriaDemo() { return ( - - Toggle button + + Toggle button - ); + ); } - ``` + 下面的代码展示了useCheckbox与useCheckboxGroup的基本使用场景： + ```javascript import React ,{ useContext, useRef }from 'react'; import {useCheckboxGroupState} from '@react-stately/checkbox'; @@ -115,7 +120,7 @@ export function CheckboxGroup(props: any) { let {children, label} = props; let state = useCheckboxGroupState(props); let {checkboxgroupProps, labelProps} = useCheckboxGroup(props, state); - + return ( {label && {label}} @@ -126,12 +131,12 @@ export function CheckboxGroup(props: any) { ); } export function Checkbox(props: any) { - + let state = useContext(CheckboxGroupContext); const inputRef = React.useRef(null); let {isFocusVisible, focusProps} = useFocusRing(); let { inputProps } = state - ? + ? useCheckboxGroupItem( { ...props, @@ -141,7 +146,7 @@ export function Checkbox(props: any) { state, inputRef ) - : + : useCheckbox(props, useToggleState(props), inputRef); return ( <> @@ -169,7 +174,9 @@ export default function CheckboxDemo() { } ``` + 下面的代码展示了useRadio与useRadioGroup的基本使用场景： + ```javascript import React from "react"; import { useRadioGroupState } from "@react-stately/radio"; @@ -239,7 +246,9 @@ export default function RadioDemo() { ); } ``` + 下面的代码展示了useSwitch的基本使用场景： + ```javascript import { useToggleState } from "@react-stately/toggle"; import React, { useRef } from "react"; @@ -410,12 +419,13 @@ export default function SwitchDemo () { ``` 下面的代码展示了useOverlayPosition的基本使用场景： + ```javascript import React from "react"; import { OverlayContainer, useOverlayPosition, - OverlayProvider + OverlayProvider, } from "@react-native-aria/overlays"; import { View, @@ -434,7 +444,6 @@ function CloseButton(props) { ); } - const OverlayView = ({ triggerRef, placement }) => { let overlayRef = React.useRef(); @@ -469,8 +478,8 @@ function Trigger({ placement }) { let triggerRef = React.useRef(); const [visible, setVisible] = React.useState(false); const toggleVisible = () => { - setVisible(!visible) - } + setVisible(!visible); + }; return ( @@ -480,9 +489,7 @@ function Trigger({ placement }) { accessibilityRole="button" accessibilityLabel="Click here to open an overlay" > - + Trigger @@ -496,17 +503,17 @@ function Trigger({ placement }) { ); } -export default function OverlaysDemo () { - return - - +export default function OverlaysDemo() { + return ( + + + + ); } - - const styles = StyleSheet.create({ - wrapper :{ + wrapper: { height: 500, alignItems: "center", justifyContent: "center", @@ -516,17 +523,18 @@ const styles = StyleSheet.create({ borderWidth: 1, paddingHorizontal: 10, paddingVertical: 10, - } -}) + }, +}); ``` + 更多hooks请参考[react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) + ## 约束与限制 ## 兼容性 本文档内容基于以下版本验证通过： - 1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59; ## 属性 @@ -535,19 +543,21 @@ const styles = StyleSheet.create({ > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - 以下属性已验证，详情见 [react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) +以下属性已验证，详情见 [react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) + > - ### Hooks - -| Name | Description | Type | Platform | HarmonyOS Support | -| -------------------- | ----------------- | --------------- | -------- | ----------------- -| useToggleButton |Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | All | yes -| useCheckbox |Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | All | yes -| useCheckboxGroup |Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | All | yes -| useRadioGroup |Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | All | yes -| useSwitch |Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | All | yes -| OverlayContainer |Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | All | yes -| useOverlayPosition |Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | All | yes + +### Hooks + +| Name | Description | Type | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| useToggleButton | Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | All | yes | +| useCheckbox | Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | All | yes | +| useCheckboxGroup | Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | All | yes | +| useRadioGroup | Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | All | yes | +| useSwitch | Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | All | yes | +| OverlayContainer | Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | All | yes | +| useOverlayPosition | Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | All | yes | ## 遗留问题 @@ -556,4 +566,3 @@ const styles = StyleSheet.create({ ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/gluestack/react-native-aria/blob/main/LICENSE)，请自由地享受和参与开源。 - diff --git a/1224/react-native-blob-util.md b/zh-cn/react-native-blob-util.md similarity index 47% rename from 1224/react-native-blob-util.md rename to zh-cn/react-native-blob-util.md index 0c6bf118..9f099a10 100644 --- a/1224/react-native-blob-util.md +++ b/zh-cn/react-native-blob-util.md @@ -13,7 +13,6 @@

- > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blob-util) ## 安装与使用 @@ -22,7 +21,7 @@ 进入到工程目录并输入以下命令： ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] # 处替换为 tgz 包的路径 @@ -42,303 +41,372 @@ yarn add @react-native-oh-tpl/react-native-blob-util@file:# 下面的代码展示了这个库的基本使用场景： ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] 使用时 import 的库名不变。 ```js -import React, { useState } from 'react'; -import { ScrollView, StyleSheet, Button, View, Text,NativeEventEmitter} from 'react-native'; -import ReactNativeBlobUtil from 'react-native-blob-util'; +import React, { useState } from "react"; +import { + ScrollView, + StyleSheet, + Button, + View, + Text, + NativeEventEmitter, +} from "react-native"; +import ReactNativeBlobUtil from "react-native-blob-util"; export default function BlobUtilDemo() { - const [result, setResult] = useState(null); - const [mkdirParam, setMkdirParam] = useState(''); - - const createFile = async () => { - await ReactNativeBlobUtil.fs.createFile(result + "/text.txt", '123456', 'utf8'); - } - - const ls = async () => { - await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir); - } - - const createFileASCII = async () => { - await ReactNativeBlobUtil.fs.createFile(result + "/text.txt", [102, 111, 111], "ascii"); - } - - const unlink = () => { - ReactNativeBlobUtil.fs.unlink(result + '/text.txt') - } - - const getConstants = () => { - let obj = ReactNativeBlobUtil.fs.dirs.CacheDir; - setResult(obj) - } - - const writeFile = () => { - ReactNativeBlobUtil.fs.writeFile(result + "/text.txt", "Try to write str", 'utf8') - } - - const writeStream = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false) - } - - const writeArrayChunk = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "ascii", false).then(reactNativeBlobUtilWriteStream => { - reactNativeBlobUtilWriteStream.encoding = 'ascii' - reactNativeBlobUtilWriteStream.write(['101', '32', '97']) - }) - } - - const writeChunk = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false).then(reactNativeBlobUtilWriteStream => { - reactNativeBlobUtilWriteStream.write('Zm9vIChXcml0ZSBCYXNlNjQpMQ==') - }) - } - - const closeStream = () => { - ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false).then(reactNativeBlobUtilWriteStream => { - setTimeout(() => { - reactNativeBlobUtilWriteStream.close(); - }, 1000) - }) - } - const readStream = () => { - ReactNativeBlobUtil.fs.readStream(result + '/text.txt', "utf8", 4000, 200) - } - - const mkdir = () => { - ReactNativeBlobUtil.fs.mkdir(ReactNativeBlobUtil.fs.dirs.DocumentDir + '/' + mkdirParam) - }; - - const stat = () => { - ReactNativeBlobUtil.fs.stat(result + "/text.txt") - } - - const copyFileToCache = () => { - ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt") - } - - const writeFileArray = () => { - ReactNativeBlobUtil.fs.writeFile(result + "/text.txt", [102, 111, 111], "ascii") - } - - const exists = () => { - ReactNativeBlobUtil.fs.exists(result + "/text.txt") - } - - const lstat = () => { - ReactNativeBlobUtil.fs.lstat(result + "/text.txt") - } - - const mv = () => { - ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt") - } - - const hash = () => { - ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5") - } - - const readFile = () => { - ReactNativeBlobUtil.fs.readFile(result + "/text.txt", 'utf8', 4000) - } - - const slice = () => { - ReactNativeBlobUtil.fs.slice(result + "/text.txt", result + "/text1.txt", 2, 5) - } - - const df = () => { - ReactNativeBlobUtil.fs.df() - } - - const addListener = () => { - let obj = 'addListener是空实现'; - setResult(obj) - } - - const removeListeners = () => { - let obj = 'removeListeners是空实现'; - setResult(obj) - } - - const emitExpiredEvent = () => { - let obj = 'emitExpiredEvent是空实现,三方库没有调用'; - setResult(obj) - } - - - return ( - - - BlobUtil - - - - {result} - - - - - - BlobUtilTurboModule.getConstants() - - - - BlobUtilTurboModule.createFile() - - - - BlobUtilTurboModule.unlink() - - - - BlobUtilTurboModule.copyFileToCache() - - - - BlobUtilTurboModule.writeFile() - - - - BlobUtilTurboModule.stat() - - - - BlobUtilTurboModule.mkdir() - - - - BlobUtilTurboModule.writeStream() - - - - BlobUtilTurboModule.ls() - - - - BlobUtilTurboModule.createFileASCII() - - - - BlobUtilTurboModule.writeFileArray() - - - - BlobUtilTurboModule.exists() - - - - BlobUtilTurboModule.lstat() - - - - BlobUtilTurboModule.hash() - - - - BlobUtilTurboModule.readFile() - - - - BlobUtilTurboModule.slice() - - - - BlobUtilTurboModule.df() - - - - BlobUtilTurboModule.closeStream() - - - - BlobUtilTurboModule.writeArrayChunk() - - - - BlobUtilTurboModule.writeChunk() - - - - BlobUtilTurboModule.readStream() - - - - BlobUtilTurboModule.mv() - - - - addListener() - - - - removeListeners() - - - - emitExpiredEvent() - - - - + const [result, setResult] = (useState < string) | (null > null); + const [mkdirParam, setMkdirParam] = useState(""); + + const createFile = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + "123456", + "utf8", + ); + }; + + const ls = async () => { + await ReactNativeBlobUtil.fs.ls(ReactNativeBlobUtil.fs.dirs.CacheDir); + }; + + const createFileASCII = async () => { + await ReactNativeBlobUtil.fs.createFile( + result + "/text.txt", + [102, 111, 111], + "ascii", + ); + }; + + const unlink = () => { + ReactNativeBlobUtil.fs.unlink(result + "/text.txt"); + }; + + const getConstants = () => { + let obj = ReactNativeBlobUtil.fs.dirs.CacheDir; + setResult(obj); + }; + + const writeFile = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + "Try to write str", + "utf8", + ); + }; + + const writeStream = () => { + ReactNativeBlobUtil.fs.writeStream(result + "/text.txt", "utf8", false); + }; + + const writeArrayChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "ascii", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.encoding = "ascii"; + reactNativeBlobUtilWriteStream.write(["101", "32", "97"]); + }); + }; + + const writeChunk = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + reactNativeBlobUtilWriteStream.write("Zm9vIChXcml0ZSBCYXNlNjQpMQ=="); + }); + }; + + const closeStream = () => { + ReactNativeBlobUtil.fs + .writeStream(result + "/text.txt", "utf8", false) + .then((reactNativeBlobUtilWriteStream) => { + setTimeout(() => { + reactNativeBlobUtilWriteStream.close(); + }, 1000); + }); + }; + const readStream = () => { + ReactNativeBlobUtil.fs.readStream(result + "/text.txt", "utf8", 4000, 200); + }; + + const mkdir = () => { + ReactNativeBlobUtil.fs.mkdir( + ReactNativeBlobUtil.fs.dirs.DocumentDir + "/" + mkdirParam, + ); + }; + + const stat = () => { + ReactNativeBlobUtil.fs.stat(result + "/text.txt"); + }; + + const copyFileToCache = () => { + ReactNativeBlobUtil.fs.cp(result + "/text.txt", result + "/text1.txt"); + }; + + const writeFileArray = () => { + ReactNativeBlobUtil.fs.writeFile( + result + "/text.txt", + [102, 111, 111], + "ascii", + ); + }; + + const exists = () => { + ReactNativeBlobUtil.fs.exists(result + "/text.txt"); + }; + + const lstat = () => { + ReactNativeBlobUtil.fs.lstat(result + "/text.txt"); + }; + + const mv = () => { + ReactNativeBlobUtil.fs.mv(result + "/text.txt", result + "/text1.txt"); + }; + + const hash = () => { + ReactNativeBlobUtil.fs.hash(result + "/text.txt", "md5"); + }; + + const readFile = () => { + ReactNativeBlobUtil.fs.readFile(result + "/text.txt", "utf8", 4000); + }; + + const slice = () => { + ReactNativeBlobUtil.fs.slice( + result + "/text.txt", + result + "/text1.txt", + 2, + 5, + ); + }; + + const df = () => { + ReactNativeBlobUtil.fs.df(); + }; + + const addListener = () => { + let obj = "addListener是空实现"; + setResult(obj); + }; + + const removeListeners = () => { + let obj = "removeListeners是空实现"; + setResult(obj); + }; + + const emitExpiredEvent = () => { + let obj = "emitExpiredEvent是空实现,三方库没有调用"; + setResult(obj); + }; + + return ( + + + BlobUtil + + + {result} - ); + + + + BlobUtilTurboModule.getConstants() + + + + BlobUtilTurboModule.createFile() + + + + BlobUtilTurboModule.unlink() + + + + + BlobUtilTurboModule.copyFileToCache() + + + + + BlobUtilTurboModule.writeFile() + + + + BlobUtilTurboModule.stat() + + + + BlobUtilTurboModule.mkdir() + + + + BlobUtilTurboModule.writeStream() + + + + BlobUtilTurboModule.ls() + + + + + BlobUtilTurboModule.createFileASCII() + + + + + + BlobUtilTurboModule.writeFileArray() + + + + + BlobUtilTurboModule.exists() + + + + BlobUtilTurboModule.lstat() + + + + BlobUtilTurboModule.hash() + + + + BlobUtilTurboModule.readFile() + + + + BlobUtilTurboModule.slice() + + + + BlobUtilTurboModule.df() + + + + BlobUtilTurboModule.closeStream() + + + + + BlobUtilTurboModule.writeArrayChunk() + + + + + BlobUtilTurboModule.writeChunk() + + + + BlobUtilTurboModule.readStream() + + + + BlobUtilTurboModule.mv() + + + + addListener() + + + + removeListeners() + + + + emitExpiredEvent() + + + + + + ); } const styles = StyleSheet.create({ - container: { - width: '100%', - height: '100%', - flexDirection: 'column', - alignItems: 'center', - backgroundColor: '#F1F3F5', - }, - baseText: { - width: '100%', - height: '100%', - fontWeight: 'bold', - textAlign: 'center', - fontSize: 16, - ellipsizeMode: 'tail', - numberOfLines: 2 - }, - titleArea: { - width: '90%', - height: '8%', - alignItems: 'center', - flexDirection: 'row', - }, - title: { - width: '90%', - color: '#000000', - textAlign: 'left', - fontSize: 30, - }, - scrollView: { - width: '90%', - marginHorizontal: 10, - }, - - inputArea: { - width: '90%', - height: '10%', - borderWidth: 2, - borderColor: '#000000', - marginTop: 8, - justifyContent: 'center', - alignItems: 'center', - }, - baseArea: { - width: '100%', - height: 60, - borderRadius: 4, - borderColor: '#000000', - marginTop: 6, - backgroundColor: '#FFFFFF', - flexDirection: 'row', - alignItems: 'center', - paddingLeft: 8, - paddingRight: 8 - } + container: { + width: "100%", + height: "100%", + flexDirection: "column", + alignItems: "center", + backgroundColor: "#F1F3F5", + }, + baseText: { + width: "100%", + height: "100%", + fontWeight: "bold", + textAlign: "center", + fontSize: 16, + ellipsizeMode: "tail", + numberOfLines: 2, + }, + titleArea: { + width: "90%", + height: "8%", + alignItems: "center", + flexDirection: "row", + }, + title: { + width: "90%", + color: "#000000", + textAlign: "left", + fontSize: 30, + }, + scrollView: { + width: "90%", + marginHorizontal: 10, + }, + + inputArea: { + width: "90%", + height: "10%", + borderWidth: 2, + borderColor: "#000000", + marginTop: 8, + justifyContent: "center", + alignItems: "center", + }, + baseArea: { + width: "100%", + height: 60, + borderRadius: 4, + borderColor: "#000000", + marginTop: 6, + backgroundColor: "#FFFFFF", + flexDirection: "row", + alignItems: "center", + paddingLeft: 8, + paddingRight: 8, + }, }); ``` @@ -490,7 +558,7 @@ ohpm install #### Android API -##### ReactNativeBlobUtil.android +##### ReactNativeBlobUtil.android | Name | Description | Required | Platform | HarmonyOS Support | | :-----------------: | :----------: | :------: | :------: | :---------------: | @@ -500,7 +568,7 @@ ohpm install #### File System Access API -##### ReactNativeBlobUtil.fs +##### ReactNativeBlobUtil.fs | Name | Description | Required | Platform | HarmonyOS Support | | :---------: | :--------------------------------: | :------: | :---------: | :---------------: | @@ -527,7 +595,7 @@ ohpm install #### iOS API -#### ReactNativeBlobUtil.ios +#### ReactNativeBlobUtil.ios | Name | Description | Required | Platform | HarmonyOS Support | | --------------- | -------------------------------------- | -------- | -------- | ----------------- | @@ -536,7 +604,7 @@ ohpm install #### Network Utils -##### ReactNativeBlobUtil.net +##### ReactNativeBlobUtil.net | Name | Description | Required | Platform | HarmonyOS Support | | ------------- | ----------- | -------- | ----------- | ----------------- | @@ -545,17 +613,15 @@ ohpm install #### Session API -##### ReactNativeBlobUtil.session +##### ReactNativeBlobUtil.session | Name | Description | Required | Platform | HarmonyOS Support | | ------- | ----------- | -------- | ----------- | ----------------- | | session | 会话 | No | IOS/Android | No | - - #### MediaStore(Android Media Storage) -##### ReactNativeBlobUtil.MediaCollection +##### ReactNativeBlobUtil.MediaCollection | Name | Description | Required | Platform | HarmonyOS Support | | ---------------- | -------------- | -------- | -------- | ----------------- | diff --git a/1224/react-native-drag-sort.md b/zh-cn/react-native-drag-sort.md similarity index 58% rename from 1224/react-native-drag-sort.md rename to zh-cn/react-native-drag-sort.md index e65a55c8..9b980bc9 100644 --- a/1224/react-native-drag-sort.md +++ b/zh-cn/react-native-drag-sort.md @@ -13,9 +13,6 @@

- - - > [!tip] [Github 地址](https://github.com/mochixuan/react-native-drag-sort) ## 安装与使用 @@ -48,8 +45,8 @@ npm i react-native-drag-sort@2.4.4 ```js import React, { useState } from "react"; -import { View, Text, StyleSheet, SafeAreaView } from 'react-native'; -import { DragSortableView } from 'react-native-drag-sort'; +import { View, Text, StyleSheet, SafeAreaView } from "react-native"; +import { DragSortableView } from "react-native-drag-sort"; //此案例id1、id2不支持拖拽 const Dragsort = () => { const [data, setData] = useState([ @@ -90,7 +87,7 @@ const Dragsort = () => { return ( - DragSortableView + DragSortableView { onClickItem={(data, item, index) => { console.log("点击了第", index, "个元素"); }} - onDragStart={() => console.log('Drag started')} - onDragEnd={() => console.log('Drag end')} + onDragStart={() => console.log("Drag started")} + onDragEnd={() => console.log("Drag end")} onDataChange={() => { console.log("数据发生变化"); }} @@ -118,16 +115,12 @@ const Dragsort = () => { minOpacity={0.7} renderItem={(item, index) => { return ( - + {item.title} ); }} sortable={true} - /> ); @@ -141,28 +134,28 @@ const styles = StyleSheet.create({ alignContent: "center", borderRadius: 5, margin: 20, - backgroundColor: '#4e71f2', + backgroundColor: "#4e71f2", height: 50, width: 100, }, text: { fontSize: 18, - color: '#fff', - textAlign: 'center' + color: "#fff", + textAlign: "center", }, header: { height: 48, - justifyContent: 'center', - alignItems: 'center', - borderBottomColor: '#2ecc71', + justifyContent: "center", + alignItems: "center", + borderBottomColor: "#2ecc71", borderBottomWidth: 2, }, header_title: { - color: '#333', + color: "#333", fontSize: 24, - fontWeight: 'bold', - } -}) + fontWeight: "bold", + }, +}); export default Dragsort; ``` @@ -171,51 +164,55 @@ export default Dragsort; ```js //此案例Item1、Item2不支持拖拽 import React, { useState } from "react"; -import { View, Text } from 'react-native'; +import { View, Text } from "react-native"; import { AutoDragSortableView } from "react-native-drag-sort"; const AutoDragSortDemo = () => { const [data, setData] = useState([ - { id: '1', text: 'Item 1' }, - { id: '2', text: 'Item 2' }, - { id: '3', text: 'Item 3' }, - { id: '4', text: 'Item 4' }, - { id: '5', text: 'Item 5' }, - { id: '6', text: 'Item 6' }, - { id: '7', text: 'Item 7' }, - { id: '8', text: 'Item 8' }, - { id: '9', text: 'Item 9' }, - { id: '10', text: 'Item 10' }, - { id: '11', text: 'Item 11' }, - { id: '12', text: 'Item 12' }, - { id: '13', text: 'Item 13' }, - { id: '14', text: 'Item 14' }, - { id: '15', text: 'Item 15' }, - { id: '16', text: 'Item 16' }, - { id: '17', text: 'Item 17' }, - { id: '18', text: 'Item 18' }, - { id: '19', text: 'Item 19' }, - { id: '20', text: 'Item 20' }, - { id: '21', text: 'Item 21' }, - { id: '22', text: 'Item 22' }, - { id: '23', text: 'Item 23' }, - { id: '24', text: 'Item 24' }, - { id: '25', text: 'Item 25' }, - { id: '26', text: 'Item 26' }, - { id: '27', text: 'Item 27' }, - { id: '28', text: 'Item 28' }, + { id: "1", text: "Item 1" }, + { id: "2", text: "Item 2" }, + { id: "3", text: "Item 3" }, + { id: "4", text: "Item 4" }, + { id: "5", text: "Item 5" }, + { id: "6", text: "Item 6" }, + { id: "7", text: "Item 7" }, + { id: "8", text: "Item 8" }, + { id: "9", text: "Item 9" }, + { id: "10", text: "Item 10" }, + { id: "11", text: "Item 11" }, + { id: "12", text: "Item 12" }, + { id: "13", text: "Item 13" }, + { id: "14", text: "Item 14" }, + { id: "15", text: "Item 15" }, + { id: "16", text: "Item 16" }, + { id: "17", text: "Item 17" }, + { id: "18", text: "Item 18" }, + { id: "19", text: "Item 19" }, + { id: "20", text: "Item 20" }, + { id: "21", text: "Item 21" }, + { id: "22", text: "Item 22" }, + { id: "23", text: "Item 23" }, + { id: "24", text: "Item 24" }, + { id: "25", text: "Item 25" }, + { id: "26", text: "Item 26" }, + { id: "27", text: "Item 27" }, + { id: "28", text: "Item 28" }, ]); - const renderHeaderView=( + const renderHeaderView = ( - 标题 + + 标题 + - ) - const renderBottomView=( + ); + const renderBottomView = ( - 底部 + + 底部 + - ) - + ); + return ( { ); }} - scaleDuration={500} //拖拽项缩放效果的持续时间 - slideDuration={200} //拖拽项滑动效果的持续时间 - autoThrottle={100} //自动滑动到目的地的间隔时间 - autoThrottleDuration={500} //自动滑动到目的地的持续时间 + scaleDuration={500} //拖拽项缩放效果的持续时间 + slideDuration={200} //拖拽项滑动效果的持续时间 + autoThrottle={100} //自动滑动到目的地的间隔时间 + autoThrottleDuration={500} //自动滑动到目的地的持续时间 sortable={true} isDragFreely={false} fixedItems={[0, 1]} delayLongPress={100} - onDragStart={() => console.log('Drag started')} - onDragEnd={() => console.log('Drag end')} + onDragStart={() => console.log("Drag started")} + onDragEnd={() => console.log("Drag end")} renderHeaderView={renderHeaderView} headerViewHeight={50} scrollIndicatorInsets={{ top: 0, left: 0, bottom: 0, right: 0 }} @@ -280,7 +277,7 @@ export default AutoDragSortDemo; ##### AnySizeDragSortableView组件使用 ```js -import React,{createRef} from 'react'; +import React, { createRef } from "react"; import { Text, TouchableOpacity, @@ -288,245 +285,272 @@ import { View, Image, Dimensions, - SafeAreaView -} from 'react-native'; -import { AnySizeDragSortableView } from 'react-native-drag-sort' + SafeAreaView, +} from "react-native"; +import { AnySizeDragSortableView } from "react-native-drag-sort"; -const {width} = Dimensions.get('window') -const headerViewHeight = 160 -const bottomViewHeight = 40 +const { width } = Dimensions.get("window"); +const headerViewHeight = 160; +const bottomViewHeight = 40; -const getW = (index, isWidth) => isWidth ? index % 3 === 0 ? (width - 40) : (width - 60) / 2 : 80; +const getW = (index, isWidth) => + isWidth ? (index % 3 === 0 ? width - 40 : (width - 60) / 2) : 80; export default class AnySizeDragSortDemo extends React.Component { constructor(props) { super(props); - const items = [] + const items = []; for (let i = 0; i < 26; i++) { - items.push({ - text: String.fromCharCode(65 + i), - width: getW(i, true), - height: getW(i, false) - }) + items.push({ + text: String.fromCharCode(65 + i), + width: getW(i, true), + height: getW(i, false), + }); } - this.state = { - items, - movedKey: null + this.state = { + items, + movedKey: null, }; - this.sortableViewRef = createRef() + this.sortableViewRef = createRef(); } onDeleteItem = (item, index) => { - const items = [...this.state.items] - items.splice(index, 1) - this.setState({ items }) - } + const items = [...this.state.items]; + items.splice(index, 1); + this.setState({ items }); + }; _renderItem = (item, index, isMoved) => { - const {movedKey} = this.state + const { movedKey } = this.state; return ( { - this.setState({movedKey: item.text}) - this.sortableViewRef.current.startTouch(item, index) + this.setState({ movedKey: item.text }); + this.sortableViewRef.current.startTouch(item, index); }} - onPressOut = {() => this.sortableViewRef.current.onPressOut()} + onPressOut={() => this.sortableViewRef.current.onPressOut()} > - - { - - this.onDeleteItem(item, index)}> - - - - } - - { - isMoved ? ( - - - - ) : null - } - - {item.text} - + + { + + this.onDeleteItem(item, index)}> + + + } + + {isMoved ? ( + + + + ) : null} + + {item.text} + + - ) - } + ); + }; render() { const { items } = this.state; const renderHeaderView = ( - - - - mochixuan - Android, React-Native, Flutter, React, Web。Learn new knowledge and share new knowledge. - + + + + mochixuan + + Android, React-Native, Flutter, React, Web。Learn new knowledge and + share new knowledge. + - ) + + ); const renderBottomView = ( - - yarn add react-native-drag-sort - - ) + + yarn add react-native-drag-sort + + ); return ( <> - AnySize + AnySize item.text} - renderItem={this._renderItem} - onDataChange={(data, callback)=> { - this.setState({items: data},()=>{ - callback() - console.log('移动了') - }) - }} - renderHeaderView = {renderHeaderView} - headerViewHeight={headerViewHeight} - renderBottomView = {renderBottomView} - bottomViewHeight={bottomViewHeight} - movedWrapStyle={styles.item_moved} - onDragEnd={()=> console.log('Drag end')} - scrollIndicatorInsets={{ top: 1, left: 1, bottom: 1, right: 1 }} - autoThrottle={100} - autoThrottleDuration={500} - areaOverlapRatio={0.5} - childMarginTop={10} - childMarginBottom={10} - childMarginLeft={10} - childMarginRight={10} + ref={this.sortableViewRef} + dataSource={items} + keyExtractor={(item) => item.text} + renderItem={this._renderItem} + onDataChange={(data, callback) => { + this.setState({ items: data }, () => { + callback(); + console.log("移动了"); + }); + }} + renderHeaderView={renderHeaderView} + headerViewHeight={headerViewHeight} + renderBottomView={renderBottomView} + bottomViewHeight={bottomViewHeight} + movedWrapStyle={styles.item_moved} + onDragEnd={() => console.log("Drag end")} + scrollIndicatorInsets={{ top: 1, left: 1, bottom: 1, right: 1 }} + autoThrottle={100} + autoThrottleDuration={500} + areaOverlapRatio={0.5} + childMarginTop={10} + childMarginBottom={10} + childMarginLeft={10} + childMarginRight={10} /> - + ); } } const styles = StyleSheet.create({ item_wrap: { - position: 'relative', + position: "relative", paddingLeft: 20, - paddingTop: 20 + paddingTop: 20, }, item: { - justifyContent: 'space-around', - alignItems: 'center', - backgroundColor: '#f39c12', + justifyContent: "space-around", + alignItems: "center", + backgroundColor: "#f39c12", borderRadius: 4, }, item_clear_wrap: { - position: 'absolute', + position: "absolute", left: 10, top: 10, width: 20, height: 20, - zIndex: 999 + zIndex: 999, }, item_clear: { width: 20, - height: 20 + height: 20, }, item_moved: { opacity: 0.95, borderRadius: 4, }, item_icon_swipe: { - width: 50, - height: 50, - backgroundColor: '#fff', - borderRadius: 50 * 0.5, - justifyContent: 'center', - alignItems: 'center', + width: 50, + height: 50, + backgroundColor: "#fff", + borderRadius: 50 * 0.5, + justifyContent: "center", + alignItems: "center", }, item_icon: { width: 30, height: 30, - resizeMode: 'contain', + resizeMode: "contain", }, item_text_swipe: { - backgroundColor: '#fff', - width: 56, - height: 30, - borderRadius: 15, - justifyContent: 'center', - alignItems: 'center', + backgroundColor: "#fff", + width: 56, + height: 30, + borderRadius: 15, + justifyContent: "center", + alignItems: "center", }, item_text: { - color: '#444', - fontSize: 20, - fontWeight: 'bold', + color: "#444", + fontSize: 20, + fontWeight: "bold", }, header: { height: 48, - justifyContent: 'center', - alignItems: 'center', - borderBottomColor: '#2ecc71', + justifyContent: "center", + alignItems: "center", + borderBottomColor: "#2ecc71", borderBottomWidth: 2, -}, -header_title: { - color: '#333', + }, + header_title: { + color: "#333", fontSize: 24, - fontWeight: 'bold' -}, + fontWeight: "bold", + }, aheader: { height: headerViewHeight, - flexDirection: 'row', - borderBottomColor: '#2ecc71', + flexDirection: "row", + borderBottomColor: "#2ecc71", borderBottomWidth: 2, zIndex: 100, - backgroundColor: '#fff' -}, -aheader_img: { + backgroundColor: "#fff", + }, + aheader_img: { width: headerViewHeight * 0.6, height: headerViewHeight * 0.6, - resizeMode: 'cover', + resizeMode: "cover", borderRadius: headerViewHeight * 0.3, marginLeft: 16, marginTop: 10, -}, -aheader_context: { + }, + aheader_context: { marginLeft: 8, height: headerViewHeight * 0.4, - marginTop: 10 -}, -aheader_title: { - color: '#333', + marginTop: 10, + }, + aheader_title: { + color: "#333", fontSize: 20, marginBottom: 10, - fontWeight: 'bold' -}, -aheader_desc: { - color: '#444', + fontWeight: "bold", + }, + aheader_desc: { + color: "#444", fontSize: 16, - width: width - headerViewHeight * 0.6 - 32 -}, -abottom: { - justifyContent: 'center', - alignItems: 'center', + width: width - headerViewHeight * 0.6 - 32, + }, + abottom: { + justifyContent: "center", + alignItems: "center", height: bottomViewHeight, - backgroundColor: '#fff', + backgroundColor: "#fff", zIndex: 100, - borderTopColor: '#2ecc71', + borderTopColor: "#2ecc71", borderTopWidth: 2, -}, -abottom_desc: { - color: '#333', + }, + abottom_desc: { + color: "#333", fontSize: 20, - fontWeight: 'bold' -} + fontWeight: "bold", + }, }); ``` - - ## 约束与限制 ### 兼容性 @@ -539,7 +563,7 @@ abottom_desc: { ## API（AutoDragSortableView、DragSortableView） -**isRequired if there is a * in the name field** +**isRequired if there is a \* in the name field** > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -547,29 +571,29 @@ abottom_desc: { > > 详情见 [react-native-drag-sort 源库地址](https://github.com/mochixuan/react-native-drag-sort) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :----------------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | -| **dataSource** * | | array | Yes | iOS/Android | Yes | -| **parentWidth** | parent width | number | No | iOS/Android | Yes | -| **childrenHeight** * | Each item height | number | Yes | iOS/Android | Yes | -| **childrenWidth** * | Each item width | number | Yes | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------------------: | :---------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | +| **dataSource** \* | | array | Yes | iOS/Android | Yes | +| **parentWidth** | parent width | number | No | iOS/Android | Yes | +| **childrenHeight** \* | Each item height | number | Yes | iOS/Android | Yes | +| **childrenWidth** \* | Each item width | number | Yes | iOS/Android | Yes | | **marginChildrenTop** | So the item's outermost view adds margin, you can only use this method. | number | No | iOS/Android | Yes | -| **marginChildrenBottom** | | number | No | iOS/Android | Yes | -| **marginChildrenLeft** | | number | No | iOS/Android | Yes | -| **marginChildrenRight** | | number | No | iOS/Android | Yes | -| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | -| **onClickItem** | click | function | No | iOS/Android | Yes | -| **onDragStart** | | function | No | iOS/Android | Yes | -| **onDragEnd** | | function | No | iOS/Android | Yes | -| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | -| **renderItem** * | render item view | function | Yes | iOS/Android | Yes | -| **fixedItems** | no remove | array | No | iOS/Android | Yes | -| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | -| **delayLongPress** | | number | No | iOS/Android | Yes | -| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | -| **onDragging** | | function | No | iOS/Android | Yes | -| **maxScale** | | number | No | iOS/Android | Yes | -| **minOpacity** | | number | No | iOS/Android | Yes | +| **marginChildrenBottom** | | number | No | iOS/Android | Yes | +| **marginChildrenLeft** | | number | No | iOS/Android | Yes | +| **marginChildrenRight** | | number | No | iOS/Android | Yes | +| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | +| **onClickItem** | click | function | No | iOS/Android | Yes | +| **onDragStart** | | function | No | iOS/Android | Yes | +| **onDragEnd** | | function | No | iOS/Android | Yes | +| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | +| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes | +| **fixedItems** | no remove | array | No | iOS/Android | Yes | +| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | +| **delayLongPress** | | number | No | iOS/Android | Yes | +| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | +| **onDragging** | | function | No | iOS/Android | Yes | +| **maxScale** | | number | No | iOS/Android | Yes | +| **minOpacity** | | number | No | iOS/Android | Yes | #### The following attributes belong only to AutoDragSortableView @@ -591,7 +615,7 @@ abottom_desc: { | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **renderItem** * | render item view | function | Yes | iOS/Android | Yes | +| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes | | **onDataChange** | This method is called every time the data changes | function | No | iOS/Android | Yes | | **renderHeaderView** | | element | No | iOS/Android | Yes | | **headerViewHeight** | | number | No | iOS/Android | Yes | @@ -609,7 +633,7 @@ abottom_desc: { | **childMarginRight** | | number | No | iOS/Android | Yes | | **autoThrottleDuration** | | number | No | iOS/Android | Yes | | **onDragEnd** | | function | No | iOS/Android | Yes | -| **dataSource** * | | array | Yes | iOS/Android | Yes | +| **dataSource** \* | | array | Yes | iOS/Android | Yes | | **keyExtractor** | (item,index) => key | function.isRequired | No | iOS/Android | Yes | ## 遗留问题 @@ -618,4 +642,4 @@ abottom_desc: { ## 开源协议 -本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-native-fs.md b/zh-cn/react-native-fs.md similarity index 53% rename from 1224/react-native-fs.md rename to zh-cn/react-native-fs.md index 594b64e1..ea0fbdcc 100644 --- a/1224/react-native-fs.md +++ b/zh-cn/react-native-fs.md @@ -21,11 +21,11 @@ 进入到工程目录并输入以下命令： ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] # 处替换为 tgz 包的路径 -#### npm +#### npm ```bash npm install @react-native-oh-tpl/react-native-fs@file:# @@ -41,103 +41,106 @@ yarn add @react-native-oh-tpl/react-native-fs@file:# 下面的代码展示了这个库的基本使用场景： ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] 使用时 import 的库名不变。 ```tsx -import React , { useState } from 'react'; +import React, { useState } from "react"; import { - SafeAreaView, - StyleSheet, - ScrollView, - View, - Text, - StatusBar, - TextInput, - Button -} from 'react-native'; -import FS from 'react-native-fs'; -import { Colors} from 'react-native/Libraries/NewAppScreen'; + SafeAreaView, + StyleSheet, + ScrollView, + View, + Text, + StatusBar, + TextInput, + Button, +} from "react-native"; +import FS from "react-native-fs"; +import { Colors } from "react-native/Libraries/NewAppScreen"; function App(): React.JSX.Element { - // 参数 - const [mkdirParam, setMkdirParam] = useState(''); - // 创建文件夹接口调用 - const mkdirExample = () => { - FS.mkdir(FS.DocumentDirectoryPath + '/' + mkdirParam).then((result) => { - console.log('file mkdirParam： '+ mkdirParam); - console.log('file Successfully created directory.'); - }, err => { - console.error('file mkdir: '+ err.message) - }); - } - // 组件 - return ( - <> + // 参数 + const [mkdirParam, setMkdirParam] = useState(""); + // 创建文件夹接口调用 + const mkdirExample = () => { + FS.mkdir(FS.DocumentDirectoryPath + "/" + mkdirParam).then( + (result) => { + console.log("file mkdirParam： " + mkdirParam); + console.log("file Successfully created directory."); + }, + (err) => { + console.error("file mkdir: " + err.message); + }, + ); + }; + // 组件 + return ( + <> + style={styles.scrollView} + > {"React Native File Harmony Demo App"} - - {"mkdir"} - + {"mkdir"} - setMkdirParam(mkdirParam)} - placeholderTextColor = "#9a73ef" - autoCapitalize = "none" - /> + setMkdirParam(mkdirParam)} + placeholderTextColor="#9a73ef" + autoCapitalize="none" + /> -