diff --git a/1224/react-native-blob-util.md b/1224/react-native-blob-util.md deleted file mode 100644 index 0c6bf11880fe53f1e7581428bd7c4925f0481076..0000000000000000000000000000000000000000 --- a/1224/react-native-blob-util.md +++ /dev/null @@ -1,580 +0,0 @@ -> 模板版本：v0.1.3 - -

-

react-native-blob-util

-

-

- - Supported platforms - - - License - - -

- - -> [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-blob-util) - -## 安装与使用 - -请到三方库的 Releases 发布地址查看配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-oh-library/react-native-blob-util/releases)，并下载适用版本的 tgz 包。 - -进入到工程目录并输入以下命令： - ->[!TIP] # 处替换为 tgz 包的路径 - - - -#### **npm** - -```bash -npm install @react-native-oh-tpl/react-native-blob-util@file:# -``` - -#### **yarn** - -```bash -yarn add @react-native-oh-tpl/react-native-blob-util@file:# -``` - - - -下面的代码展示了这个库的基本使用场景： - ->[!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'; - -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 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 - } -}); -``` - -## Link - -目前鸿蒙暂不支持 AutoLink，所以 Link 步骤需要手动配置。 - -首先需要使用 DevEco Studio 打开项目里的鸿蒙工程 `harmony` - -### 引入原生端代码 - -目前有两种方法： - -1. 通过 har 包引入（在 IDE 完善相关功能后该方法会被遗弃，目前首选此方法）； -2. 直接链接源码。 - -方法一：通过 har 包引入 - -> [!TIP] har 包位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil.har" - } -``` - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -方法二：直接链接源码 - -> [!TIP] 源码位于三方库安装路径的 `harmony` 文件夹下。 - -打开 `entry/oh-package.json5`，添加以下依赖 - -```json -"dependencies": { - "rnoh": "file:../rnoh", - "rnoh-blob-util": "file:../../node_modules/@react-native-oh-tpl/react-native-blob-util/harmony/blobUtil" - } -``` - -打开终端，执行： - -```bash -cd entry -ohpm install --no-link -``` - -### 配置 CMakeLists 和引入 BlobUtilPackage - -打开 `entry/src/main/cpp/CMakeLists.txt`，添加： - -```diff -project(rnapp) -cmake_minimum_required(VERSION 3.4.1) -set(RNOH_APP_DIR "${CMAKE_CURRENT_SOURCE_DIR}") -set(OH_MODULE_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../oh_modules") -set(RNOH_CPP_DIR "${CMAKE_CURRENT_SOURCE_DIR}/../../../../../../react-native-harmony/harmony/cpp") - -add_subdirectory("${RNOH_CPP_DIR}" ./rn) - -# RNOH_BEGIN: add_package_subdirectories -add_subdirectory("../../../../sample_package/src/main/cpp" ./sample-package) -+ add_subdirectory("${OH_MODULE_DIR}/rnoh-blob-util/src/main/cpp" ./blobUtil) -# RNOH_END: add_package_subdirectories - -add_library(rnoh_app SHARED - "./PackageProvider.cpp" - "${RNOH_CPP_DIR}/RNOHAppNapiBridge.cpp" -) - -target_link_libraries(rnoh_app PUBLIC rnoh) - -# RNOH_BEGIN: link_packages -target_link_libraries(rnoh_app PUBLIC rnoh_sample_package) -+ target_link_libraries(rnoh_app PUBLIC rnoh_blob_util) -# RNOH_END: link_packages -``` - -打开 `entry/src/main/cpp/PackageProvider.cpp`，添加： - -```diff -#include "RNOH/PackageProvider.h" -#include "SamplePackage.h" -+ #include "BlobUtilPackage.h" - -using namespace rnoh; - -std::vector> PackageProvider::getPackages(Package::Context ctx) { - return { - std::make_shared(ctx), -+ std::make_shared(ctx) - }; -} -``` - -### 在 ArkTs 侧引入 BlobUtilPackage - -打开 `entry/src/main/ets/RNPackagesFactory.ts`，添加： - -```diff -... -+ import {BlobUtilPackage} from 'rnoh-blob-util/ts'; - -export function createRNPackages(ctx: RNPackageContext): RNPackage[] { - return [ - new SamplePackage(ctx), -+ new BlobUtilPackage(ctx) - ]; -} -``` - -### 运行 - -点击右上角的 `sync` 按钮 - -或者在终端执行： - -```bash -cd entry -ohpm install -``` - -然后编译、运行即可。 - -## 约束与限制 - -### 兼容性 - -要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。 - -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@react-native-oh-tpl/react-native-blob-util Releases](https://github.com/react-native-blob-util/releases) - -## API - -> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 - -> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - -#### Android API - -##### ReactNativeBlobUtil.android - -| Name | Description | Required | Platform | HarmonyOS Support | -| :-----------------: | :----------: | :------: | :------: | :---------------: | -| actionViewIntent | 动作视图意图 | No | Android | No | -| getContentIntent | 获取内容意图 | No | Android | No | -| addCompleteDownload | 添加完整下载 | No | Android | No | - -#### File System Access API - -##### ReactNativeBlobUtil.fs - -| Name | Description | Required | Platform | HarmonyOS Support | -| :---------: | :--------------------------------: | :------: | :---------: | :---------------: | -| dirs | 目录 | NO | IOS/Android | Yes | -| createFile | 创建文件 | NO | IOS/Android | Yes | -| writeFile | 写文件 | NO | IOS/Android | Yes | -| writeStream | 写流 | NO | IOS/Android | Yes | -| appendFile | 追加文件 | NO | IOS/Android | Yes | -| readFile | 读取文件 | NO | IOS/Android | Yes | -| hash | 哈希 | NO | IOS/Android | Yes | -| readStream | 读流 | NO | IOS/Android | Yes | -| mkdir | 创建目录 | NO | IOS/Android | Yes | -| ls | 查看当下的文件和目录 | NO | IOS/Android | Yes | -| mv | 移动文件位置 | NO | IOS/Android | Yes | -| cp | 复制文件 | NO | IOS/Android | Yes | -| exists | 检查文件是否存在 | NO | IOS/Android | Yes | -| isDir | 是否是目录 | NO | IOS/Android | Yes | -| unlink | 删除文件 | NO | IOS/Android | Yes | -| lstat | 获取目录下文件的统计数据 | NO | IOS/Android | Yes | -| stat | 类似地获取数据或目录的统计信息 | NO | IOS/Android | Yes | -| scanFile | 扫描文件 | NO | Android | No | -| asset | 资产 | NO | IOS/Android | Yes | -| df | 获取设备的可用磁盘空间和总磁盘空间 | NO | IOS/Android | Yes | - -#### iOS API - -#### ReactNativeBlobUtil.ios - -| Name | Description | Required | Platform | HarmonyOS Support | -| --------------- | -------------------------------------- | -------- | -------- | ----------------- | -| previewDocument | 文档查看器--需要系统权限 | No | iOS | No | -| openDocument | 显示与文件交互的选项菜单--需要系统权限 | No | iOS | No | - -#### Network Utils - -##### ReactNativeBlobUtil.net - -| Name | Description | Required | Platform | HarmonyOS Support | -| ------------- | ----------- | -------- | ----------- | ----------------- | -| getCookies | 获取cookie | No | IOS/Android | No | -| removeCookies | 删除cookie | No | IOS/Android | No | - -#### Session API - -##### ReactNativeBlobUtil.session - -| Name | Description | Required | Platform | HarmonyOS Support | -| ------- | ----------- | -------- | ----------- | ----------------- | -| session | 会话 | No | IOS/Android | No | - - - -#### MediaStore(Android Media Storage) - -##### ReactNativeBlobUtil.MediaCollection - -| Name | Description | Required | Platform | HarmonyOS Support | -| ---------------- | -------------- | -------- | -------- | ----------------- | -| CopyToMediaStore | 复制到媒体存储 | No | Android | No | -| createMediaFile | 创建媒体文件 | No | Android | No | -| writeMediaFile | 写媒体文件 | No | Android | No | -| copyToInternal | 复制到内部 | No | Android | No | - -#### Utils API - -| Name | Description | Required | Platform | HarmonyOS Support | -| ------ | ----------- | -------- | ----------- | ----------------- | -| wrap | | No | Android/IOS | No | -| base64 | | No | Android/IOS | No | - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/react-native-oh-library/react-native-blob-util/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/README.md b/README.md index 99c9ba603bcdfa434e34bbedf4782f1a7e03cf3e..2324b9c92d9014c0906696e498facc5b903798c5 100644 --- a/README.md +++ b/README.md @@ -127,6 +127,22 @@ | 105 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core) | 0.5.0 | 是 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core/releases) | [链接](/zh-cn/react-native-worklets-core.md) | | 106 | [react-use](https://github.com/zenghongtu/react-use) | 17.2.4 | - | [react-use](https://github.com/zenghongtu/react-use/releases) | [链接](/zh-cn/react-use.md) | | 107 | [redux-toolkit](https://github.com/reduxjs/redux-toolkit) | 2.2.3 | - | [redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases) | [链接](/zh-cn/redux-toolkit.md) | +| 108 | [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) | +| 109 | [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) | +| 110 | [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) | +| 111 | [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) | +| 112 | [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) | +| 113 | [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) | +| 114 | [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) | +| 115 | [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) | +| 116 | [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) | +| 117 | [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) | +| 118 | [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) | +| 119 | [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) | +| 120 | [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) | +| 121 | [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) | +| 122 | [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) | +| 123 | [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 c1d57b7a721de82e5114bc409526293f36153b47..0c747cc2065c4d9e107f0d41a5d1c20b56024d37 100644 --- a/_sidebar.md +++ b/_sidebar.md @@ -39,6 +39,14 @@ - [react-native-pdf](/zh-cn/react-native-pdf.md) - [react-native-image-editor](/zh-cn/react-native-image-editor.md) - [react-native-worklets-core](/zh-cn/react-native-worklets-core.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) @@ -96,6 +104,10 @@ - [react-use](/zh-cn/react-use.md) - [redux-toolkit](/zh-cn/redux-toolkit.md) - [react-native-image-viewing](/zh-cn/react-native-image-viewing.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) @@ -113,3 +125,7 @@ - [redux-persist](/zh-cn/redux-persist.md) - [qrcode-generator](/zh-cn/qrcode-generator.md) - [EventBus](/zh-cn/EventBus.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 f99033f9fb60e025777fd57e833657ed52074f91..232508f5025cb46b701fc1a894b649a9edc3215b 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -127,6 +127,22 @@ | 105 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core) | 0.5.0 | 是 | [react-native-worklets-core](https://github.com/react-native-oh-library/react-native-worklets-core/releases) | [链接](/zh-cn/react-native-worklets-core.md) | | 106 | [react-use](https://github.com/zenghongtu/react-use) | 17.2.4 | - | [react-use](https://github.com/zenghongtu/react-use/releases) | [链接](/zh-cn/react-use.md) | | 107 | [redux-toolkit](https://github.com/reduxjs/redux-toolkit) | 2.2.3 | - | [redux-toolkit](https://github.com/reduxjs/redux-toolkit/releases) | [链接](/zh-cn/redux-toolkit.md) | +| 108 | [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) | +| 109 | [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) | +| 110 | [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) | +| 111 | [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) | +| 112 | [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) | +| 113 | [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) | +| 114 | [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) | +| 115 | [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) | +| 116 | [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) | +| 117 | [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) | +| 118 | [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) | +| 119 | [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) | +| 120 | [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) | +| 121 | [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) | +| 122 | [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) | +| 123 | [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 ec12ad9f4c18ee2b3c435ebc6375d9dd98263a0c..9e505a98993889ce01bfb0f851e605b574fcb7ef 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-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 e65a55c87aa9e681bf25019cc4909f5dd5c35725..9b980bc94e799eef760738e3472b1d5a24a0f584 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 594b64e1cf1ad1cfc752775d2e1186eed8ea4185..ea0fbdcce2db694a2d4b2d1b40559ade610d51dd 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" + /> -