From b73f5114fb571aace0302441a702e2f4519926a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=98=89=E8=AF=9A?= <425765923@qq.com> Date: Wed, 6 Dec 2023 22:06:05 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I8MCVG]=20=E6=96=87=E6=A1=A3?= =?UTF-8?q?=E5=AE=89=E8=A3=85=E6=8F=8F=E8=BF=B0=E6=95=B4=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 12 ++-- zh-cn/README.md | 34 +++++------ zh-cn/lottie-react-native.md | 62 ++++++++++---------- zh-cn/react-native-SmartRefreshLayout.md | 2 + zh-cn/react-native-exception-handler.md | 20 ++++--- zh-cn/react-native-fast-image.md | 44 +++++++------- zh-cn/react-native-image-picker.md | 74 ++++++++++++------------ zh-cn/react-native-linear-gradient.md | 31 +++++----- zh-cn/react-native-masked-view.md | 14 +++-- zh-cn/react-native-pager-view.md | 36 ++++++------ zh-cn/react-native-safe-area-context.md | 20 ++++--- zh-cn/react-native-svg.md | 60 +++++++++---------- zh-cn/react-native-video.md | 56 +++++++++--------- zh-cn/react-native-webview.md | 44 +++++++------- 14 files changed, 262 insertions(+), 247 deletions(-) diff --git a/README.md b/README.md index f689ef37..6a2d3d0a 100644 --- a/README.md +++ b/README.md @@ -23,12 +23,12 @@ | 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | | 8 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | | 9 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | -| 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | -| 11 | lottie-react-native | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | -| 12 | react-native-webview | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](zh-cn/react-native-webview.md) | -| 13 | react-native-svg | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | -| 14 | react-native-exception-handler | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](zh-cn/react-native-exception-handler.md) | - +| 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | +| 11 | lottie-react-native | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | +| 12 | react-native-webview | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](zh-cn/react-native-webview.md) | +| 13 | react-native-svg | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | +| 14 | react-native-exception-handler | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](zh-cn/react-native-exception-handler.md) | +| 15 | react-native-pager-view | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](zh-cn/react-native-pager-view.md) | ## 社区 [react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/zh-cn/README.md b/zh-cn/README.md index f689ef37..74983f90 100644 --- a/zh-cn/README.md +++ b/zh-cn/README.md @@ -12,23 +12,23 @@ >[!tip] NPM Github Packages 私仓坐标：@react-native-oh-library -| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 -|:---:| :----------: |:-------------:| :----------: | :----------: | :----------: | :----------: | -| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](zh-cn/async-storage.md) | -| 2 | @react-native-clipboard/clipboard | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](zh-cn/clipboard.md) | -| 3 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](zh-cn/picker.md) | -| 4 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](zh-cn/progress-bar-android.md) | -| 5 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](zh-cn/react-native-checkbox.md) | -| 6 | react-native-fast-image | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](zh-cn/react-native-fast-image.md) | -| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](zh-cn/react-native-linear-gradient.md) | -| 8 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](zh-cn/react-native-masked-view.md) | -| 9 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](zh-cn/react-native-slider.md) | -| 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](zh-cn/react-native-SmartRefreshLayout.md) | -| 11 | lottie-react-native | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](zh-cn/lottie-react-native.md) | -| 12 | react-native-webview | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](zh-cn/react-native-webview.md) | -| 13 | react-native-svg | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](zh-cn/react-native-svg.md) | -| 14 | react-native-exception-handler | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](zh-cn/react-native-exception-handler.md) | - +| 序号 | 原库名 | 原库基线版本 | 原库是否支持新架构 | 鸿蒙化进度 | Releases | 文档链接 +|:---:|:--------------------------------------------:|:-------------:| :----------: | :----------: | :----------: | :----------: | +| 1 | @react-native-async-storage/async-storage | 1.19.5 | 是 | 100% | [@react-native-oh-library/async-storage](https://github.com/react-native-oh-library/async-storage/releases) | [链接](async-storage.md) | +| 2 | @react-native-clipboard/clipboard | 1.12.1 | 是 | 80% | [@react-native-oh-library/clipboard](https://github.com/react-native-oh-library/clipboard/releases) | [链接](clipboard.md) | +| 3 | @react-native-picker/picker | 2.5.1 | 否 | 90% | [@react-native-oh-library/picker](https://github.com/react-native-oh-library/picker/releases) | [链接](picker.md) | +| 4 | @react-native-community/progress-bar-android | 1.0.4 | 是 | 90% | [@react-native-oh-library/progress-bar-android](https://github.com/react-native-oh-library/progress-bar-android/releases) | [链接](progress-bar-android.md) | +| 5 | @react-native-community/checkbox | 0.5.16 | 否 | 100% | [@react-native-oh-library/checkbox](https://github.com/react-native-oh-library/react-native-checkbox/releases) | [链接](react-native-checkbox.md) | +| 6 | react-native-fast-image | 8.6.3 | 否 | 70% | [@react-native-oh-tpl/react-native-fast-image](https://github.com/react-native-oh-library/react-native-fast-image/releases) | [链接](react-native-fast-image.md) | +| 7 | react-native-linear-gradient | 3.0.0-alpha.1 | 是 | 90% | [@react-native-oh-tpl/react-native-linear-gradient](https://github.com/react-native-oh-library/react-native-linear-gradient/releases) | [链接](react-native-linear-gradient.md) | +| 8 | @react-native-masked-view/masked-view | 0.2.9 | 否 | 90% | [@react-native-oh-library/masked-view](https://github.com/react-native-oh-library/masked-view/releases) | [链接](react-native-masked-view.md) | +| 9 | @react-native-community/slider | 4.4.3 | 是 | 90% | [@react-native-oh-library/slider](https://github.com/react-native-oh-library/react-native-slider/releases) | [链接](react-native-slider.md) | +| 10 | react-native-SmartRefreshLayout | 0.6.7 | 否 | 70% | [@react-native-oh-tpl/react-native-SmartRefreshLayout](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases) | [链接](react-native-SmartRefreshLayout.md) | +| 11 | lottie-react-native | 6.4.1 | 是 | 50% | [@react-native-oh-tpl/lottie-react-native](https://github.com/react-native-oh-library/lottie-react-native/releases) | [链接](lottie-react-native.md) | +| 12 | react-native-webview | 13.6.2 | 是 | 15% | [@react-native-oh-tpl/react-native-webview](https://github.com/react-native-oh-library/react-native-webview/releases) | [链接](react-native-webview.md) | +| 13 | react-native-svg | 13.14.0 | 是 | 10% | [@react-native-oh-tpl/react-native-svg](https://github.com/react-native-oh-library/react-native-svg/releases) | [链接](react-native-svg.md) | +| 14 | react-native-exception-handler | 2.10.10 | 否 | 100% | [@react-native-oh-tpl/react-native-exception-handler](https://github.com/react-native-oh-library/react-native-exception-handler/releases) | [链接](react-native-exception-handler.md) | +| 15 | react-native-pager-view | 6.2.2 | 是 | 100% | [@react-native-oh-tpl/react-native-pager-view](https://github.com/react-native-oh-library/react-native-pager-view/releases) | [链接](react-native-pager-view.md) | ## 社区 [react-native-oh-library](https://github.com/react-native-oh-library) \ No newline at end of file diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md index 8eff7597..160a4efa 100644 --- a/zh-cn/lottie-react-native.md +++ b/zh-cn/lottie-react-native.md @@ -18,16 +18,18 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/lottie-react-native/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash -yarn add lottie-react-native@npm:@react-native-oh-tpl/lottie-react-native +yarn add xxx ``` #### **npm** ```bash -npm install lottie-react-native@npm:@react-native-oh-tpl/lottie-react-native +npm install xxx ``` @@ -201,37 +203,37 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------- | -------- | --------------------- | -------- | -| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string \| AnimationObject \| { uri: string } | None | Yes | All | Yes | -| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | -| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | -| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | -| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | -| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | -| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover' \| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | -| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | -| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | -| imageAssetsFolder | Needed for Android to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | -| useNativeLooping | Only Windows. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the loop prop will reset playback rather than finishing gracefully. | boolean | false | No | Windows | No | -| onAnimationLoop | Only Windows and Web. A callback function invoked when the animation loops. | callback | None | No | Windows, Web | No | -| onAnimationFinish | A callback function which will be called when animation is finished. This callback is called with a boolean isCancelled argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling play() or reset() while is was still playing. Note that this callback will be called only when loop is set to false. | callback | None | No | All | Yes | -| renderMode | a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration | 'AUTOMATIC' \| 'HARDWARE' \| 'SOFTWARE' | AUTOMATIC | No | iOS, Android | No | -| cacheComposition | Only Android, a boolean flag indicating whether or not the animation should do caching. | boolean | true | No | Android | Yes | -| colorFilters | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | Array | [] | No | iOS, Android, Windows | No | -| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | -| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | -| hover | Only Web, a boolean denoting whether to play on mouse hover. | boolean | false | No | Web | No | -| direction | Only Web a number from 1 or -1 denoting playing direction. | 1 \| -1 | 1 | No | Web | No | +| 名称 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------ | ---------------------------------------- | ---------------------------------------- | --------- | ---- | --------------------- | ---- | +| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string \| AnimationObject \| { uri: string } | None | Yes | All | Yes | +| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | +| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | +| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | +| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | +| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | +| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover' \| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | +| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | +| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | +| imageAssetsFolder | Needed for Android to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | +| useNativeLooping | Only Windows. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the loop prop will reset playback rather than finishing gracefully. | boolean | false | No | Windows | No | +| onAnimationLoop | Only Windows and Web. A callback function invoked when the animation loops. | callback | None | No | Windows, Web | No | +| onAnimationFinish | A callback function which will be called when animation is finished. This callback is called with a boolean isCancelled argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling play() or reset() while is was still playing. Note that this callback will be called only when loop is set to false. | callback | None | No | All | Yes | +| renderMode | a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration | 'AUTOMATIC' \| 'HARDWARE' \| 'SOFTWARE' | AUTOMATIC | No | iOS, Android | No | +| cacheComposition | Only Android, a boolean flag indicating whether or not the animation should do caching. | boolean | true | No | Android | Yes | +| colorFilters | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | Array | [] | No | iOS, Android, Windows | No | +| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | +| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | +| hover | Only Web, a boolean denoting whether to play on mouse hover. | boolean | false | No | Web | No | +| direction | Only Web a number from 1 or -1 denoting playing direction. | 1 \| -1 | 1 | No | Web | No | ## 方法 (Imperative API) -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- | -| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | -| reset | Reset the animation back to 0 progress. | function | No | All | Yes | -| pause | Pauses the animation. | function | No | All | Yes | -| resume | Resumes the paused animation. | function | No | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------ | ---------------------------------------- | -------- | ---- | ---- | ---- | +| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | +| reset | Reset the animation back to 0 progress. | function | No | All | Yes | +| pause | Pauses the animation. | function | No | All | Yes | +| resume | Resumes the paused animation. | function | No | All | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index d3664fa0..4808e72d 100644 --- a/zh-cn/react-native-SmartRefreshLayout.md +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -18,6 +18,8 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash diff --git a/zh-cn/react-native-exception-handler.md b/zh-cn/react-native-exception-handler.md index 703b3b73..6ea8df8e 100644 --- a/zh-cn/react-native-exception-handler.md +++ b/zh-cn/react-native-exception-handler.md @@ -18,16 +18,18 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-exception-handler/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash -yarn add react-native-exception-handler@npm:@react-native-oh-tpl/react-native-exception-handler +yarn add xxx ``` #### **npm** ```bash -npm install react-native-exception-handler@npm:@react-native-oh-tpl/react-native-exception-handler +npm install xxx ``` @@ -338,16 +340,16 @@ ohpm install ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | -------------------- | -------- | -------- | -------- | -------- | -| `setJSExceptionHandler` | 设置 JS 异常处理方法 | function | no | All | yes | -| `getJSExceptionHandler` | 获取 JS 异常处理方法 | function | no | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------- | ------------ | -------- | ---- | ---- | ---- | +| `setJSExceptionHandler` | 设置 JS 异常处理方法 | function | no | All | yes | +| `getJSExceptionHandler` | 获取 JS 异常处理方法 | function | no | All | yes | ## API -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| --------------------------- | ------------------------ | -------- | -------- | ------------ | -------- | -| `setNativeExceptionHandler` | 设置 native 异常处理方法 | function | no | android，ios | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------------------- | ---------------- | -------- | ---- | ----------- | ---- | +| `setNativeExceptionHandler` | 设置 native 异常处理方法 | function | no | android，ios | yes | ## 遗留问题 diff --git a/zh-cn/react-native-fast-image.md b/zh-cn/react-native-fast-image.md index 899ed296..a5be49a8 100644 --- a/zh-cn/react-native-fast-image.md +++ b/zh-cn/react-native-fast-image.md @@ -18,16 +18,18 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-fast-image/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash -yarn add react-native-fast-image@npm:@react-native-oh-tpl/react-native-fast-image +yarn add xxx ``` #### **npm** ```bash -npm install react-native-fast-image@npm:@react-native-oh-tpl/react-native-fast-image +npm install xxx ``` @@ -223,28 +225,28 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | -------- | -| `source.uri` | Source for the remote image to load. | string | yes | All | yes | -| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes | -| `source.priority?` | loading url priority | enum | No | All | no | -| `source.cache?` | setting loading url cache mode | enum | No | All | no | -| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes | -| `resizeMode?` | loading image for scale mode | enum | yes | ALL | yes | -| `onLoadStart?: () => void` | Called when the image starts to load. | function | yes | ALL | yes | -| `onProgress?: (event) => void` | Called when the image is loading. | function | yes | All | yes | -| `onLoad?: (event) => void` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes | -| `onError?: () => void` | Called on an image fetching error. | function | yes | All | yes | -| `onLoadEnd?: () => void` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes | -| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------------------ | ---------------------------------------- | ---------------- | ---- | ---- | ---- | +| `source.uri` | Source for the remote image to load. | string | yes | All | yes | +| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes | +| `source.priority?` | loading url priority | enum | No | All | no | +| `source.cache?` | setting loading url cache mode | enum | No | All | no | +| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes | +| `resizeMode?` | loading image for scale mode | enum | yes | ALL | yes | +| `onLoadStart?: () => void` | Called when the image starts to load. | function | yes | ALL | yes | +| `onProgress?: (event) => void` | Called when the image is loading. | function | yes | All | yes | +| `onLoad?: (event) => void` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes | +| `onError?: () => void` | Called on an image fetching error. | function | yes | All | yes | +| `onLoadEnd?: () => void` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes | +| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | yes | ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------------------------------------- | ------------------------------------------ | -------- | -------- | -------- | -------- | -| `FastImage.preload: (source[]) => void` | Preload images to display later. e.g. | function | No | All | No | -| `FastImage.clearMemoryCache: () => Promise` | Clear all images from memory cache. | function | No | All | no | -| `FastImage.clearDiskCache: () => Promise` | Clear all images from disk cache. priority | function | No | All | no | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------------------------- | ---------------------------------------- | -------- | ---- | ---- | ---- | +| `FastImage.preload: (source[]) => void` | Preload images to display later. e.g. | function | No | All | No | +| `FastImage.clearMemoryCache: () => Promise` | Clear all images from memory cache. | function | No | All | no | +| `FastImage.clearDiskCache: () => Promise` | Clear all images from disk cache. priority | function | No | All | no | ## 遗留问题 diff --git a/zh-cn/react-native-image-picker.md b/zh-cn/react-native-image-picker.md index f401639a..7724c0ca 100644 --- a/zh-cn/react-native-image-picker.md +++ b/zh-cn/react-native-image-picker.md @@ -16,6 +16,8 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-image-picker/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash @@ -202,48 +204,48 @@ ohpm install ### Options -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | -------- | -| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | -| maxWidth | To resize the image. | number | no | iOS Android | no | -| maxHeight | To resize the image. | number | no | iOS Android | no | -| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | -| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | -| quality | 0 to 1, photos. | number | no | iOS Android | no | -| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | -| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | -| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | -| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | -| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1. | number | no | iOS Android Web | yes | -| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | -| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | -| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------- | ---------------------------------------- | ------- | ---- | --------------- | ---- | +| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | +| maxWidth | To resize the image. | number | no | iOS Android | no | +| maxHeight | To resize the image. | number | no | iOS Android | no | +| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | +| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | +| quality | 0 to 1, photos. | number | no | iOS Android | no | +| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | +| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | +| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | +| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | +| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1. | number | no | iOS Android Web | yes | +| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | +| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | +| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | ### The Response Object -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | -------- | -| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | -| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | -| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | -| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------ | ---------------------------------------- | ------- | ---- | --------------- | ---- | +| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | +| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | +| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | +| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | ### Asset Object -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | -------- | -| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | -| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | -| originalPath | The original file path. | string | yes | iOS Android Web | yes | -| width | Asset dimensions | number | yes | iOS Android Web | yes | -| height | Asset dimensions | number | yes | iOS Android Web | yes | -| fileSize | The file size | number | yes | iOS Android | yes | -| type | The file type | string | yes | iOS Android | yes | -| fileName | The file name | string | yes | iOS Android | yes | -| duration | The selected video duration in seconds | number | no | iOS Android | yes | -| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | -| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | yes | -| id | local identifier of the photo or video. On Android, this is the same as fileName | string | no | iOS Android | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------ | ---------------------------------------- | ------ | ---- | --------------- | ---- | +| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | +| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | +| originalPath | The original file path. | string | yes | iOS Android Web | yes | +| width | Asset dimensions | number | yes | iOS Android Web | yes | +| height | Asset dimensions | number | yes | iOS Android Web | yes | +| fileSize | The file size | number | yes | iOS Android | yes | +| type | The file type | string | yes | iOS Android | yes | +| fileName | The file name | string | yes | iOS Android | yes | +| duration | The selected video duration in seconds | number | no | iOS Android | yes | +| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | +| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | yes | +| id | local identifier of the photo or video. On Android, this is the same as fileName | string | no | iOS Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-linear-gradient.md b/zh-cn/react-native-linear-gradient.md index f742dc9b..9d4bb603 100644 --- a/zh-cn/react-native-linear-gradient.md +++ b/zh-cn/react-native-linear-gradient.md @@ -17,25 +17,20 @@ 进入到工程目录并输入以下命令： -```json -@react-native-oh-library:registry=https://npm.pkg.github.com -//npm.pkg.github.com/:_authToken=TOKEN -``` - -进入到工程目录并输入以下命令： - +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash -yarn add react-native-linear-gradient@npm:@react-native-oh-tpl/react-native-linear-gradient +yarn add xxx ``` #### **npm** ```bash -npm install react-native-linear-gradient@npm:@react-native-oh-tpl/react-native-linear-gradient +npm install xxx ``` @@ -228,15 +223,15 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | -| colors | Color Array | (string\|number)[] | NO | All | yes | -| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | -| useAngle | Use angle (default false) | boolean | NO | All | yes | -| angle | Angle (useAngle=true valid) | number | NO | All | yes | -| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | -| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | -| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | ---------------------------------------- | ---------------------- | ---- | ---- | ------- | +| colors | Color Array | (string\|number)[] | NO | All | yes | +| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | +| useAngle | Use angle (default false) | boolean | NO | All | yes | +| angle | Angle (useAngle=true valid) | number | NO | All | yes | +| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | +| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | +| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | ## 遗留问题 diff --git a/zh-cn/react-native-masked-view.md b/zh-cn/react-native-masked-view.md index d31b21be..a0e254d3 100644 --- a/zh-cn/react-native-masked-view.md +++ b/zh-cn/react-native-masked-view.md @@ -27,16 +27,18 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/masked-view/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash -yarn add @react-native-masked-view/masked-view@npm:@react-native-oh-library/masked-view +yarn add xxx ``` #### **npm** ```bash -npm install @react-native-masked-view/masked-view@npm:@react-native-oh-library/masked-view +npm install xxx ``` @@ -234,10 +236,10 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------- | ------------ | ------------------ | -------- | -------- | -------- | -| `maskElement` | 遮罩元素 | element | yes | All | yes | -| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------- | ------ | ------------------ | ---- | ------- | ---- | +| `maskElement` | 遮罩元素 | element | yes | All | yes | +| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | ## 遗留问题 diff --git a/zh-cn/react-native-pager-view.md b/zh-cn/react-native-pager-view.md index 3a59eb40..871d02d7 100644 --- a/zh-cn/react-native-pager-view.md +++ b/zh-cn/react-native-pager-view.md @@ -14,7 +14,7 @@ ## 安装与使用 -进入到工程目录并输入以下命令（待发布到 npm，当前使用请在[Release](https://github.com/react-native-oh-library/react-native-pager-view/releases)中获取）： +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-pager-view/releases)中获取库tgz，通过使用本地依赖来安装本库。** ```bash yarn add xxx @@ -209,23 +209,23 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------- | ------------ | -------------------------- | -| initialPage | Index of initial page that should be selected | number | 是 | ios，android | yes | -| scrollEnabled | Should pager view scroll, when scroll enabled | bool | 是 | ios，android | yes | -| onPageScroll | Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages) | function | 否 | ios，android | yes | -| onPageScrollStateChanged | Function called when the page scrolling state has changed | function | 否 | ios，android | yes | -| onPageSelected | This callback will be called once the ViewPager finishes navigating to the selected page | function | 否 | ios，android | yes | -| pageMargin | Blank space to be shown between pages | number （取值范围:0~屏幕宽度） | 否 | ios，android | 仅支持取 0-368（屏幕宽度） | -| keyboardDismissMode | Determines whether the keyboard gets dismissed in response to a drag | one of 'none' ,'on-drag' | 否 | ios,droid | yes | -| orientation | Set horizontal or vertical scrolling orientation (it does not work dynamically) | one of horizontal vertical | 否 | ios，android | yes | -| overScrollMode | Used to override default value of overScroll mode. Can be auto, always or never. Defaults to auto | one of auto, always ,never | 否 | android | yes | -| offscreenPageLimit | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | number | 否 | android | yes | -| overdrag | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to false | bool | 否 | ios | yes | -| layoutDirection | Specifies layout direction. Use ltr or rtl to set explicitly or locale to deduce from the default language script of a locale. Defaults to locale | string | 否 | android,ios | yes | -| setPage(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | -| setPageWithoutAnimation(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | -| setScrollEnabled(scrollEnabled: boolean) | FA helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) | function | 否 | android,ios | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------------------------- | ---------------------------------------- | -------------------------- | ---- | ----------- | ---------------- | +| initialPage | Index of initial page that should be selected | number | 是 | ios，android | yes | +| scrollEnabled | Should pager view scroll, when scroll enabled | bool | 是 | ios，android | yes | +| onPageScroll | Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages) | function | 否 | ios，android | yes | +| onPageScrollStateChanged | Function called when the page scrolling state has changed | function | 否 | ios，android | yes | +| onPageSelected | This callback will be called once the ViewPager finishes navigating to the selected page | function | 否 | ios，android | yes | +| pageMargin | Blank space to be shown between pages | number （取值范围:0~屏幕宽度） | 否 | ios，android | 仅支持取 0-368（屏幕宽度） | +| keyboardDismissMode | Determines whether the keyboard gets dismissed in response to a drag | one of 'none' ,'on-drag' | 否 | ios,droid | yes | +| orientation | Set horizontal or vertical scrolling orientation (it does not work dynamically) | one of horizontal vertical | 否 | ios，android | yes | +| overScrollMode | Used to override default value of overScroll mode. Can be auto, always or never. Defaults to auto | one of auto, always ,never | 否 | android | yes | +| offscreenPageLimit | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | number | 否 | android | yes | +| overdrag | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to false | bool | 否 | ios | yes | +| layoutDirection | Specifies layout direction. Use ltr or rtl to set explicitly or locale to deduce from the default language script of a locale. Defaults to locale | string | 否 | android,ios | yes | +| setPage(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | +| setPageWithoutAnimation(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | +| setScrollEnabled(scrollEnabled: boolean) | FA helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) | function | 否 | android,ios | yes | ## 遗留问题 diff --git a/zh-cn/react-native-safe-area-context.md b/zh-cn/react-native-safe-area-context.md index d3525e75..1252bf0c 100644 --- a/zh-cn/react-native-safe-area-context.md +++ b/zh-cn/react-native-safe-area-context.md @@ -18,6 +18,8 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash @@ -244,20 +246,20 @@ You should add `SafeAreaProvider` in your app root component. You may need to ad Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates. -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- | -| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | -| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------- | ---------------------------------------- | ------ | ---- | ---- | ---- | +| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | +| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes | **组件 SafeAreaView** `SafeAreaView` is a regular View component with the safe area insets applied as padding or margin. -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------- | ----------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- | -| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | -| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes | -| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------- | ---------------------------------------- | ------ | ---- | ---- | ---- | +| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | +| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes | +| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-svg.md b/zh-cn/react-native-svg.md index f7aa4a64..225878f1 100644 --- a/zh-cn/react-native-svg.md +++ b/zh-cn/react-native-svg.md @@ -18,6 +18,8 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-svg/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash @@ -238,12 +240,12 @@ ohpm install **Svg**：绘制组件的父组件 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :-----: | :------: | :-------------: | -------- | -------- | -------- | -| width | 组件宽度 | number\| string | Yes | All | Yes | -| height | 组件高度 | number\| string | Yes | All | Yes | -| viewBox | 组件视区 | string | No | All | Yes | -| color | 颜色 | string | No | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :-----: | :--: | :-------------: | ---- | ---- | ---- | +| width | 组件宽度 | number\| string | Yes | All | Yes | +| height | 组件高度 | number\| string | Yes | All | Yes | +| viewBox | 组件视区 | string | No | All | Yes | +| color | 颜色 | string | No | All | Yes | **G**：该元素是用于对其他 SVG 元素进行分组的容器 @@ -252,38 +254,38 @@ ohpm install **Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :--: | :------------------: | :----: | -------- | -------- | -------- | -| d | 路径绘制的命令字符串 | string | Yes | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :--: | :--------: | :----: | ---- | ---- | ---- | +| d | 路径绘制的命令字符串 | string | Yes | All | Yes | **Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :----: | :---------------: | :-------------: | -------- | -------- | -------- | -| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | -| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | -| width | 元素宽度 | number\| string | Yes | All | Yes | -| height | 元素高度 | number\| string | Yes | All | Yes | -| rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | -| rx | 定义 y 轴上的半径 | number\| string | No | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :----: | :--------: | :-------------: | ---- | ---- | ---- | +| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | +| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | +| width | 元素宽度 | number\| string | Yes | All | Yes | +| height | 元素高度 | number\| string | Yes | All | Yes | +| rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | +| rx | 定义 y 轴上的半径 | number\| string | No | All | Yes | **Image**： 图像元素，支持 JPEG、PNG 格式 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :----: | :---------------: | :-------------: | -------- | -------- | -------- | -| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | -| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | -| width | 元素宽度 | number\| string | Yes | All | Yes | -| height | 元素高度 | number\| string | Yes | All | Yes | -| href | 图像资源引用 | source\| string | Yes | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :----: | :--------: | :-------------: | ---- | ---- | ---- | +| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | +| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | +| width | 元素宽度 | number\| string | Yes | All | Yes | +| height | 元素高度 | number\| string | Yes | All | Yes | +| href | 图像资源引用 | source\| string | Yes | All | Yes | **公共属性**：Common props 组件属性支持情况 -| 属性 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | G | Path | Rect | -| :---------: | :----------------------------------: | :----: | :----: | :------: | -------- | --- | ---- | ---- | -| fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ | -| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ | -| strokeWidth | 设置边框宽度 | number | 1 | No | All | | √ | √ | +| 属性 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | G | Path | Rect | +| :---------: | :----------------: | :----: | :----: | :--: | ---- | ---- | ---- | ---- | +| fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ | +| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ | +| strokeWidth | 设置边框宽度 | number | 1 | No | All | | √ | √ | ## 遗留问题 diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index 4fbff613..aafa01a8 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -19,16 +19,18 @@ +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-video/releases)中获取库tgz，通过使用本地依赖来安装本库。** + #### **yarn** ```bash -yarn add react-native-video@npm:@react-native-oh-tpl/react-native-video +yarn add xxx ``` #### **npm** ```bash -npm install react-native-video@npm:@react-native-oh-tpl/react-native-video +npm install xxx ``` @@ -297,37 +299,37 @@ ohpm install 如下是 react-native-video 已经鸿蒙化的属性： -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :------------------------------------------- | -------- | ------------ | -------- | -| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes | -| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | -| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | -| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | -| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | -| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | -| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | -| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | -| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------ | ---------------------------------------- | :----- | ---- | ---------------------------------------- | ---- | +| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes | +| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | +| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | +| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | +| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | +| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | +| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | +| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | +| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | ## 事件回调 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------- | ------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | -------- | -| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | -| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | -| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | -| `onProgress` | Callback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing. | function | No | All | yes | -| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | -| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | -| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | -| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | -| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------- | ---------------------------------------- | :------- | ---- | ---------------------------------------- | ---- | +| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | +| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | +| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | +| `onProgress` | Callback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing. | function | No | All | yes | +| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | +| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | +| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | +| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | +| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------- | ------------------------------------------------------------ | :------- | -------- | -------- | -------- | -| `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------- | ---------------------------------------- | :------- | ---- | ---- | ---- | +| `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-webview.md b/zh-cn/react-native-webview.md index ff7cbd85..39e0fda6 100644 --- a/zh-cn/react-native-webview.md +++ b/zh-cn/react-native-webview.md @@ -14,14 +14,16 @@ 进入到工程目录并输入以下命令： +**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-webview/releases)中获取库tgz，通过使用本地依赖来安装本库。** + ```bash -yarn add react-native-webview@npm:@react-native-oh-tpl/react-native-webview +yarn add xxx ``` 或者 ```bash -npm install react-native-webview@npm:@react-native-oh-tpl/react-native-webview +npm install xxx ``` 下面的代码展示了这个库的基本使用场景： @@ -209,25 +211,25 @@ ohpm install 如下是 webview 已经鸿蒙化的属性： -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ----------------- | -------- | -| `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl | yes | All | yes | -| `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | -| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | -| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | -| `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | -| `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | -| `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android. | boolean | No | android | yes | -| `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | -| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | -| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | -| `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | -| `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | -| `textZoom?` | If the user has set a custom font size in the Android system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | -| ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | -| ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | -| ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | -| ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ----------------- | ---- | +| `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl | yes | All | yes | +| `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | +| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | +| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | +| `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | +| `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | +| `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android. | boolean | No | android | yes | +| `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | +| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | +| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | +| `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | +| `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | +| `textZoom?` | If the user has set a custom font size in the Android system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | +| ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | +| ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | +| ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | +| ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | ## 遗留问题 -- Gitee From bc79b5d4fed89f9f4f0ed2eb69edea9965d7048b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9E=97=E5=98=89=E8=AF=9A?= <425765923@qq.com> Date: Wed, 6 Dec 2023 22:10:56 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I8MCVG]=20=E6=A0=BC=E5=BC=8F?= =?UTF-8?q?=E5=8C=96=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/lottie-react-native.md | 58 +++++------ zh-cn/react-native-SmartRefreshLayout.md | 127 ++++++++++++----------- zh-cn/react-native-exception-handler.md | 16 +-- zh-cn/react-native-fast-image.md | 40 +++---- zh-cn/react-native-image-picker.md | 74 ++++++------- zh-cn/react-native-linear-gradient.md | 20 ++-- zh-cn/react-native-masked-view.md | 10 +- zh-cn/react-native-pager-view.md | 36 +++---- zh-cn/react-native-safe-area-context.md | 20 ++-- zh-cn/react-native-svg.md | 60 +++++------ zh-cn/react-native-video.md | 59 ++++++----- zh-cn/react-native-webview.md | 40 +++---- 12 files changed, 285 insertions(+), 275 deletions(-) diff --git a/zh-cn/lottie-react-native.md b/zh-cn/lottie-react-native.md index 160a4efa..56fe3cdb 100644 --- a/zh-cn/lottie-react-native.md +++ b/zh-cn/lottie-react-native.md @@ -18,7 +18,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/lottie-react-native/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/lottie-react-native/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -203,37 +203,37 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------ | ---------------------------------------- | ---------------------------------------- | --------- | ---- | --------------------- | ---- | -| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string \| AnimationObject \| { uri: string } | None | Yes | All | Yes | -| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | -| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | -| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | -| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | -| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | -| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover' \| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | -| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | -| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | -| imageAssetsFolder | Needed for Android to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | -| useNativeLooping | Only Windows. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the loop prop will reset playback rather than finishing gracefully. | boolean | false | No | Windows | No | -| onAnimationLoop | Only Windows and Web. A callback function invoked when the animation loops. | callback | None | No | Windows, Web | No | -| onAnimationFinish | A callback function which will be called when animation is finished. This callback is called with a boolean isCancelled argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling play() or reset() while is was still playing. Note that this callback will be called only when loop is set to false. | callback | None | No | All | Yes | -| renderMode | a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration | 'AUTOMATIC' \| 'HARDWARE' \| 'SOFTWARE' | AUTOMATIC | No | iOS, Android | No | -| cacheComposition | Only Android, a boolean flag indicating whether or not the animation should do caching. | boolean | true | No | Android | Yes | -| colorFilters | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | Array | [] | No | iOS, Android, Windows | No | -| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | -| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | -| hover | Only Web, a boolean denoting whether to play on mouse hover. | boolean | false | No | Web | No | -| direction | Only Web a number from 1 or -1 denoting playing direction. | 1 \| -1 | 1 | No | Web | No | +| 名称 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | --------- | -------- | --------------------- | -------- | +| source | Mandatory - The source of animation. Can be referenced as a local asset by a string, or remotely with an object with a uri property, or it can be an actual JS object of an animation, obtained (for example) with something like require('../path/to/animation.json') | string \| AnimationObject \| { uri: string } | None | Yes | All | Yes | +| progress | A number between 0 and 1. This number represents the normalized progress of the animation. If you update this prop, the animation will correspondingly update to the frame at that progress value. This prop is not required if you are using the imperative API. | number | 0 | No | iOS, Android, Windows | Yes | +| speed | The speed the animation will progress. Sending a negative value will reverse the animation | number | 1 | No | All | Yes | +| duration | The duration of the animation in ms. Takes precedence over speed when set. This only works when source is an actual JS object of an animation. | number | undefined | No | iOS, Android, Windows | Yes | +| loop | A boolean flag indicating whether or not the animation should loop. | boolean | true | No | All | Yes | +| autoPlay | A boolean flag indicating whether or not the animation should start automatically when mounted. This only affects the imperative API. | boolean | false | No | All | Yes | +| resizeMode | Determines how to resize the animated view when the frame doesn't match the raw image dimensions. Supports cover, contain and center. | 'cover' \| 'contain' \| 'center' | contain | No | iOS, Android, Windows | No | +| style | Style attributes for the view, as expected in a standard View, aside from border styling | StyleProp | None | No | iOS, Android, Windows | Yes | +| webStyle | Style attributes for the view, it uses CSSProperties. | CSSProperties | None | No | Web | No | +| imageAssetsFolder | Needed for Android to work properly with assets, iOS will ignore it. | string | None | No | Android | Yes | +| useNativeLooping | Only Windows. When enabled, uses platform-level looping to improve smoothness, but onAnimationLoop will not fire and changing the loop prop will reset playback rather than finishing gracefully. | boolean | false | No | Windows | No | +| onAnimationLoop | Only Windows and Web. A callback function invoked when the animation loops. | callback | None | No | Windows, Web | No | +| onAnimationFinish | A callback function which will be called when animation is finished. This callback is called with a boolean isCancelled argument, indicating if the animation actually completed playing, or if it was cancelled, for instance by calling play() or reset() while is was still playing. Note that this callback will be called only when loop is set to false. | callback | None | No | All | Yes | +| renderMode | a String flag to set whether or not to render with HARDWARE or SOFTWARE acceleration | 'AUTOMATIC' \| 'HARDWARE' \| 'SOFTWARE' | AUTOMATIC | No | iOS, Android | No | +| cacheComposition | Only Android, a boolean flag indicating whether or not the animation should do caching. | boolean | true | No | Android | Yes | +| colorFilters | An array of objects denoting layers by KeyPath and a new color filter value (as hex string). | Array | [] | No | iOS, Android, Windows | No | +| textFiltersAndroid | Only Android, an array of objects denoting text values to find and replace. | Array | [] | No | Android | No | +| textFiltersIOS | Only iOS, an array of objects denoting text layers by KeyPath and a new string value. | Array | [] | No | iOS | No | +| hover | Only Web, a boolean denoting whether to play on mouse hover. | boolean | false | No | Web | No | +| direction | Only Web a number from 1 or -1 denoting playing direction. | 1 \| -1 | 1 | No | Web | No | ## 方法 (Imperative API) -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------ | ---------------------------------------- | -------- | ---- | ---- | ---- | -| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | -| reset | Reset the animation back to 0 progress. | function | No | All | Yes | -| pause | Pauses the animation. | function | No | All | Yes | -| resume | Resumes the paused animation. | function | No | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | -------- | -------- | +| play | Play the animation all the way through, at the speed specified as a prop. It can also play a section of the animation (not available on web) when called as play(startFrame, endFrame). | function | No | All | Yes | +| reset | Reset the animation back to 0 progress. | function | No | All | Yes | +| pause | Pauses the animation. | function | No | All | Yes | +| resume | Resumes the paused animation. | function | No | All | Yes | ## 遗留问题 diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index 4808e72d..be495368 100644 --- a/zh-cn/react-native-SmartRefreshLayout.md +++ b/zh-cn/react-native-SmartRefreshLayout.md @@ -18,7 +18,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -37,25 +37,34 @@ npm install xxx 下面的代码展示了这个库的基本使用场景： ```js -import React, {useState} from 'react'; -import {View, Text, FlatList, StyleSheet, TouchableOpacity} from 'react-native'; -import {SmartRefreshControl, AnyHeader} from 'react-native-smartrefreshlayout'; +import React, { useState } from "react"; +import { + View, + Text, + FlatList, + StyleSheet, + TouchableOpacity, +} from "react-native"; +import { + SmartRefreshControl, + AnyHeader, +} from "react-native-smartrefreshlayout"; const App = () => { - const [text, setText] = useState('状态'); + const [text, setText] = useState("状态"); 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: 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" }, // ... more data ... ]); - const renderItem = ({item}) => ( + const renderItem = ({ item }) => ( {item.text} @@ -65,37 +74,39 @@ const App = () => { { - smartRefreshControlRef.finishRefresh({delayed: -1, success: true}); - }}> - + smartRefreshControlRef.finishRefresh({ delayed: -1, success: true }); + }} + > + 点击完成刷新finish - + {text} (smartRefreshControlRef = ref)} - primaryColor={'#f3f3f3'} + ref={(ref) => (smartRefreshControlRef = ref)} + primaryColor={"#f3f3f3"} headerHeight={66} - style={{height: 500, width: '100%', backgroundColor: '#ffcc00'}} + style={{ height: 500, width: "100%", backgroundColor: "#ffcc00" }} enableRefresh enableLoadMore - onHeaderMoving={e => { - setText('onHeaderMoving' + JSON.stringify(e.nativeEvent)); + onHeaderMoving={(e) => { + setText("onHeaderMoving" + JSON.stringify(e.nativeEvent)); }} HeaderComponent={ - 刷新头 + 刷新头 - }> + } + > item.id.toString()} + keyExtractor={(item) => item.id.toString()} /> @@ -105,7 +116,7 @@ const App = () => { const styles = StyleSheet.create({ item: { padding: 16, - width: '100%', + width: "100%", height: 100, }, }); @@ -281,51 +292,51 @@ ohpm install **组件 SmartRefreshControl** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| --------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ------- | ---- | -| `HeaderComponent` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes | -| `renderHeader` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | No | -| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | No | -| `headerHeight` | 设定 header 的高度 | number | No | Android | Yes | -| `primaryColor` | 设置刷新组件的主调色 | string | No | Android | Yes | -| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | No | -| `pureScroll` | 是否启用纯滚动 | boolean | No | Android | No | -| `overScrollBounce` | 是否启用越界拖动，类似 IOS 样式。 | boolean | No | Android | No | -| `dragRate` | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | No | -| `maxDragRate` | 设置最大显示下拉高度与 header 标准高度的比值，默认为 2.0。 | number | No | Android | No | -| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | No | -| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | No | -| `onRefresh` | 刷新时触发 | function | No | Android | Yes | -| `onHeaderReleased` | Header 释放时触发 | function | No | Android | No | -| `onHeaderMoving` | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes | -| `finishRefresh` | 完成刷新 | Methods | No | Android | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------------- | ---------------------------------------------------------------- | ---------------------------------------------------------------------------- | -------- | -------- | -------- | +| `HeaderComponent` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element | No | Android | Yes | +| `renderHeader` | 用于渲染 SmartRefreshLayout 组件的 header,默认为 DefaultHeader。 | Element/func | No | Android | No | +| `enableRefresh` | 是否启用下拉刷新,默认为 true | boolean | No | Android | No | +| `headerHeight` | 设定 header 的高度 | number | No | Android | Yes | +| `primaryColor` | 设置刷新组件的主调色 | string | No | Android | Yes | +| `autoRefresh` | 是否自动刷新 | object:{refresh:boolean, time:number} | No | Android | No | +| `pureScroll` | 是否启用纯滚动 | boolean | No | Android | No | +| `overScrollBounce` | 是否启用越界拖动，类似 IOS 样式。 | boolean | No | Android | No | +| `dragRate` | 设置组件下拉高度与手指真实下拉高度的比值,默认为 0.5。 | number | No | Android | No | +| `maxDragRate` | 设置最大显示下拉高度与 header 标准高度的比值，默认为 2.0。 | number | No | Android | No | +| `onPullDownToRefresh` | 可下拉刷新时触发 | function | No | Android | No | +| `onReleaseToRefresh` | 可释放刷新时触发 | function | No | Android | No | +| `onRefresh` | 刷新时触发 | function | No | Android | Yes | +| `onHeaderReleased` | Header 释放时触发 | function | No | Android | No | +| `onHeaderMoving` | header 移动过程中触发,包括下拉过程和释放过程。 | ({nativeEvent: {percent:number, offset:number, headerHeight:number}})=>void; | No | Android | Yes | +| `finishRefresh` | 完成刷新 | Methods | No | Android | Yes | **组件 AnyHeader** 仅组件支持渲染，在 RNOH0.72.10 版本中需要给 List 类型子组件添加 bounces = {false}属性，否则无法触发本组件的下拉。（0.72.11 版本已解决） -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------------- | ---------------- | ------ | ---- | ------- | ---- | -| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------------- | ------------------------ | ------ | -------- | -------- | -------- | +| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | **组件 DefaultHeader/ClassicsHeader** 当前组件不支持 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------------- | ---------------- | ------ | ---- | ------- | ---- | -| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | -| `accentColor` | 刷新组件 Header 的强调色 | string | No | Android | 不支持 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------------- | ------------------------ | ------ | -------- | -------- | -------- | +| `primaryColor` | 刷新组件 Header 的主调色 | string | No | Android | 不支持 | +| `accentColor` | 刷新组件 Header 的强调色 | string | No | Android | 不支持 | **组件 StoreHouseHeader** 当前组件不支持 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | ---------------------- | ------ | ---- | ------- | ---- | -| `text` | StoreHouseHeader 的文字 | string | No | Android | 不支持 | -| `textColor` | StoreHouseHeader 的文字颜色 | string | No | Android | 不支持 | -| `lineWidth` | StoreHouseHeader 的文字线宽 | number | No | Android | 不支持 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | --------------------------- | ------ | -------- | -------- | -------- | +| `text` | StoreHouseHeader 的文字 | string | No | Android | 不支持 | +| `textColor` | StoreHouseHeader 的文字颜色 | string | No | Android | 不支持 | +| `lineWidth` | StoreHouseHeader 的文字线宽 | number | No | Android | 不支持 | --- diff --git a/zh-cn/react-native-exception-handler.md b/zh-cn/react-native-exception-handler.md index 6ea8df8e..1260dc90 100644 --- a/zh-cn/react-native-exception-handler.md +++ b/zh-cn/react-native-exception-handler.md @@ -18,7 +18,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-exception-handler/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-exception-handler/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -340,16 +340,16 @@ ohpm install ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ------------ | -------- | ---- | ---- | ---- | -| `setJSExceptionHandler` | 设置 JS 异常处理方法 | function | no | All | yes | -| `getJSExceptionHandler` | 获取 JS 异常处理方法 | function | no | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------- | -------------------- | -------- | -------- | -------- | -------- | +| `setJSExceptionHandler` | 设置 JS 异常处理方法 | function | no | All | yes | +| `getJSExceptionHandler` | 获取 JS 异常处理方法 | function | no | All | yes | ## API -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| --------------------------- | ---------------- | -------- | ---- | ----------- | ---- | -| `setNativeExceptionHandler` | 设置 native 异常处理方法 | function | no | android，ios | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| --------------------------- | ------------------------ | -------- | -------- | ------------ | -------- | +| `setNativeExceptionHandler` | 设置 native 异常处理方法 | function | no | android，ios | yes | ## 遗留问题 diff --git a/zh-cn/react-native-fast-image.md b/zh-cn/react-native-fast-image.md index a5be49a8..1d572af5 100644 --- a/zh-cn/react-native-fast-image.md +++ b/zh-cn/react-native-fast-image.md @@ -18,7 +18,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-fast-image/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-fast-image/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -225,28 +225,28 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------------------ | ---------------------------------------- | ---------------- | ---- | ---- | ---- | -| `source.uri` | Source for the remote image to load. | string | yes | All | yes | -| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes | -| `source.priority?` | loading url priority | enum | No | All | no | -| `source.cache?` | setting loading url cache mode | enum | No | All | no | -| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes | -| `resizeMode?` | loading image for scale mode | enum | yes | ALL | yes | -| `onLoadStart?: () => void` | Called when the image starts to load. | function | yes | ALL | yes | -| `onProgress?: (event) => void` | Called when the image is loading. | function | yes | All | yes | -| `onLoad?: (event) => void` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes | -| `onError?: () => void` | Called on an image fetching error. | function | yes | All | yes | -| `onLoadEnd?: () => void` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes | -| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------------------ | ----------------------------------------------------------------------------------------- | ---------------- | -------- | -------- | -------- | +| `source.uri` | Source for the remote image to load. | string | yes | All | yes | +| `source.headers?` | Headers to load the image with. e.g. { Authorization: 'someAuthToken' }. | object | yes | All | yes | +| `source.priority?` | loading url priority | enum | No | All | no | +| `source.cache?` | setting loading url cache mode | enum | No | All | no | +| `defaultSource?` | An asset loaded with require(...). | number | yes | All | yes | +| `resizeMode?` | loading image for scale mode | enum | yes | ALL | yes | +| `onLoadStart?: () => void` | Called when the image starts to load. | function | yes | ALL | yes | +| `onProgress?: (event) => void` | Called when the image is loading. | function | yes | All | yes | +| `onLoad?: (event) => void` | Called on a successful image fetch. Called with the width and height of the loaded image. | function | yes | All | yes | +| `onError?: () => void` | Called on an image fetching error. | function | yes | All | yes | +| `onLoadEnd?: () => void` | Called when the image finishes loading, whether it was successful or an error. | function | yes | All | yes | +| `tintColor?` | If supplied, changes the color of all the non-transparent pixels to the given color. | number \| string | yes | All | yes | ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------------------------- | ---------------------------------------- | -------- | ---- | ---- | ---- | -| `FastImage.preload: (source[]) => void` | Preload images to display later. e.g. | function | No | All | No | -| `FastImage.clearMemoryCache: () => Promise` | Clear all images from memory cache. | function | No | All | no | -| `FastImage.clearDiskCache: () => Promise` | Clear all images from disk cache. priority | function | No | All | no | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------------------------------------- | ------------------------------------------ | -------- | -------- | -------- | -------- | +| `FastImage.preload: (source[]) => void` | Preload images to display later. e.g. | function | No | All | No | +| `FastImage.clearMemoryCache: () => Promise` | Clear all images from memory cache. | function | No | All | no | +| `FastImage.clearDiskCache: () => Promise` | Clear all images from disk cache. priority | function | No | All | no | ## 遗留问题 diff --git a/zh-cn/react-native-image-picker.md b/zh-cn/react-native-image-picker.md index 7724c0ca..f7f7400f 100644 --- a/zh-cn/react-native-image-picker.md +++ b/zh-cn/react-native-image-picker.md @@ -16,7 +16,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-image-picker/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-image-picker/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -204,48 +204,48 @@ ohpm install ### Options -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------------------- | ---------------------------------------- | ------- | ---- | --------------- | ---- | -| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | -| maxWidth | To resize the image. | number | no | iOS Android | no | -| maxHeight | To resize the image. | number | no | iOS Android | no | -| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | -| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | -| quality | 0 to 1, photos. | number | no | iOS Android | no | -| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | -| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | -| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | -| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | -| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1. | number | no | iOS Android Web | yes | -| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | -| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | -| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------- | -------- | --------------- | -------- | +| mediaType | photo or video or mixed(launchCamera on Android does not support 'mixed'). Web only supports 'photo' for now. | string | yes | iOS Android Web | yes | +| maxWidth | To resize the image. | number | no | iOS Android | no | +| maxHeight | To resize the image. | number | no | iOS Android | no | +| videoQuality | low, medium, or high on iOS, low or high on Android. | string | no | iOS Android | no | +| durationLimit | Video max duration (in seconds). | number | no | iOS Android | no | +| quality | 0 to 1, photos. | number | no | iOS Android | no | +| cameraType | 'back' or 'front' (May not be supported in few android devices). | string | no | iOS Android | no | +| includeBase64 | If true, creates base64 string of the image (Avoid using on large image files due to performance). | boolean | no | iOS Android Web | no | +| includeExtra | If true, will include extra data which requires library permissions to be requested (i.e. exif data). | boolean | no | iOS Android | no | +| saveToPhotos | (Boolean) Only for launchCamera, saves the image/video file captured to public photo. | boolean | no | iOS Android | no | +| selectionLimit | Supports providing any integer value. Use 0 to allow any number of files on iOS version >= 14 & Android version >= 13. Default is 1. | number | no | iOS Android Web | yes | +| presentationStyle | Controls how the picker is presented. currentContext, pageSheet, fullScreen, formSheet, popover, overFullScreen, overCurrentContext. Default is currentContext. | string | no | iOS | no | +| formatAsMp4 | Converts the selected video to MP4 (iOS Only). | boolean | no | iOS | no | +| assetRepresentationMode | A mode that determines which representation to use if an asset contains more than one. Possible values: 'auto', 'current', 'compatible'. Default is 'auto'. | boolean | no | iOS | no | ### The Response Object -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------ | ---------------------------------------- | ------- | ---- | --------------- | ---- | -| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | -| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | -| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | -| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------ | ------------------------------------------------------- | ------- | -------- | --------------- | -------- | +| didCancel | true if the user cancelled the process | boolean | no | iOS Android Web | yes | +| errorCode | Check ErrorCode for all error codes | string | no | iOS Android Web | no | +| errorMessage | Description of the error, use it for debug purpose only | string | no | iOS Android Web | no | +| assets | Array of the selected media, refer to Asset Object | Asset | no | iOS Android Web | yes | ### Asset Object -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------ | ---------------------------------------- | ------ | ---- | --------------- | ---- | -| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | -| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | -| originalPath | The original file path. | string | yes | iOS Android Web | yes | -| width | Asset dimensions | number | yes | iOS Android Web | yes | -| height | Asset dimensions | number | yes | iOS Android Web | yes | -| fileSize | The file size | number | yes | iOS Android | yes | -| type | The file type | string | yes | iOS Android | yes | -| fileName | The file name | string | yes | iOS Android | yes | -| duration | The selected video duration in seconds | number | no | iOS Android | yes | -| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | -| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | yes | -| id | local identifier of the photo or video. On Android, this is the same as fileName | string | no | iOS Android | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | --------------- | -------- | +| base64 | The base64 string of the image (photos only) | string | no | iOS Android Web | no | +| uri | The file uri in app specific cache storage. Except when picking video from Android gallery where you will get read only content uri, to get file uri in this case copy the file to app specific storage using any react-native library. For web it uses the base64 as uri. | string | yes | iOS Android Web | yes | +| originalPath | The original file path. | string | yes | iOS Android Web | yes | +| width | Asset dimensions | number | yes | iOS Android Web | yes | +| height | Asset dimensions | number | yes | iOS Android Web | yes | +| fileSize | The file size | number | yes | iOS Android | yes | +| type | The file type | string | yes | iOS Android | yes | +| fileName | The file name | string | yes | iOS Android | yes | +| duration | The selected video duration in seconds | number | no | iOS Android | yes | +| bitrate | The average bitrate (in bits/sec) of the selected video, if available. (Android only) | number | no | Android | no | +| timestamp | Timestamp of the asset. Only included if 'includeExtra' is true | string | no | iOS Android | yes | +| id | local identifier of the photo or video. On Android, this is the same as fileName | string | no | iOS Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-linear-gradient.md b/zh-cn/react-native-linear-gradient.md index 9d4bb603..1291c6b8 100644 --- a/zh-cn/react-native-linear-gradient.md +++ b/zh-cn/react-native-linear-gradient.md @@ -19,7 +19,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-linear-gradient/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -223,15 +223,15 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----------- | ---------------------------------------- | ---------------------- | ---- | ---- | ------- | -| colors | Color Array | (string\|number)[] | NO | All | yes | -| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | -| useAngle | Use angle (default false) | boolean | NO | All | yes | -| angle | Angle (useAngle=true valid) | number | NO | All | yes | -| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | -| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | -| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ----------- | -------------------------------------------------------- | ---------------------- | -------- | -------- | -------- | +| colors | Color Array | (string\|number)[] | NO | All | yes | +| locations | Color for unknown array (length 0 or the same as colors) | number[] | NO | All | yes | +| useAngle | Use angle (default false) | boolean | NO | All | yes | +| angle | Angle (useAngle=true valid) | number | NO | All | yes | +| angleCenter | Middle angle coordinate | { x: number,y: number} | NO | All | no | +| start | Starting point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | +| end | End point coordinates (default value: {x: 0.5,1}) | { x: number,y: number} | NO | All | partial | ## 遗留问题 diff --git a/zh-cn/react-native-masked-view.md b/zh-cn/react-native-masked-view.md index a0e254d3..5cacc1b8 100644 --- a/zh-cn/react-native-masked-view.md +++ b/zh-cn/react-native-masked-view.md @@ -27,7 +27,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/masked-view/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/masked-view/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -236,10 +236,10 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------- | ------ | ------------------ | ---- | ------- | ---- | -| `maskElement` | 遮罩元素 | element | yes | All | yes | -| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------- | ------------ | ------------------ | -------- | -------- | -------- | +| `maskElement` | 遮罩元素 | element | yes | All | yes | +| `androidRenderingMode` | 安卓渲染模式 | software, hardware | no | android | no | ## 遗留问题 diff --git a/zh-cn/react-native-pager-view.md b/zh-cn/react-native-pager-view.md index 871d02d7..5235ec7e 100644 --- a/zh-cn/react-native-pager-view.md +++ b/zh-cn/react-native-pager-view.md @@ -14,7 +14,7 @@ ## 安装与使用 -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-pager-view/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-pager-view/releases)中获取库 tgz，通过使用本地依赖来安装本库。** ```bash yarn add xxx @@ -209,23 +209,23 @@ ohpm install ## 属性 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------------------------- | ---------------------------------------- | -------------------------- | ---- | ----------- | ---------------- | -| initialPage | Index of initial page that should be selected | number | 是 | ios，android | yes | -| scrollEnabled | Should pager view scroll, when scroll enabled | bool | 是 | ios，android | yes | -| onPageScroll | Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages) | function | 否 | ios，android | yes | -| onPageScrollStateChanged | Function called when the page scrolling state has changed | function | 否 | ios，android | yes | -| onPageSelected | This callback will be called once the ViewPager finishes navigating to the selected page | function | 否 | ios，android | yes | -| pageMargin | Blank space to be shown between pages | number （取值范围:0~屏幕宽度） | 否 | ios，android | 仅支持取 0-368（屏幕宽度） | -| keyboardDismissMode | Determines whether the keyboard gets dismissed in response to a drag | one of 'none' ,'on-drag' | 否 | ios,droid | yes | -| orientation | Set horizontal or vertical scrolling orientation (it does not work dynamically) | one of horizontal vertical | 否 | ios，android | yes | -| overScrollMode | Used to override default value of overScroll mode. Can be auto, always or never. Defaults to auto | one of auto, always ,never | 否 | android | yes | -| offscreenPageLimit | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | number | 否 | android | yes | -| overdrag | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to false | bool | 否 | ios | yes | -| layoutDirection | Specifies layout direction. Use ltr or rtl to set explicitly or locale to deduce from the default language script of a locale. Defaults to locale | string | 否 | android,ios | yes | -| setPage(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | -| setPageWithoutAnimation(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | -| setScrollEnabled(scrollEnabled: boolean) | FA helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) | function | 否 | android,ios | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------ | -------- | ------------ | -------------------------- | +| initialPage | Index of initial page that should be selected | number | 是 | ios，android | yes | +| scrollEnabled | Should pager view scroll, when scroll enabled | bool | 是 | ios，android | yes | +| onPageScroll | Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages) | function | 否 | ios，android | yes | +| onPageScrollStateChanged | Function called when the page scrolling state has changed | function | 否 | ios，android | yes | +| onPageSelected | This callback will be called once the ViewPager finishes navigating to the selected page | function | 否 | ios，android | yes | +| pageMargin | Blank space to be shown between pages | number （取值范围:0~屏幕宽度） | 否 | ios，android | 仅支持取 0-368（屏幕宽度） | +| keyboardDismissMode | Determines whether the keyboard gets dismissed in response to a drag | one of 'none' ,'on-drag' | 否 | ios,droid | yes | +| orientation | Set horizontal or vertical scrolling orientation (it does not work dynamically) | one of horizontal vertical | 否 | ios，android | yes | +| overScrollMode | Used to override default value of overScroll mode. Can be auto, always or never. Defaults to auto | one of auto, always ,never | 否 | android | yes | +| offscreenPageLimit | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | number | 否 | android | yes | +| overdrag | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to false | bool | 否 | ios | yes | +| layoutDirection | Specifies layout direction. Use ltr or rtl to set explicitly or locale to deduce from the default language script of a locale. Defaults to locale | string | 否 | android,ios | yes | +| setPage(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | +| setPageWithoutAnimation(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | function | 否 | android,ios | yes | +| setScrollEnabled(scrollEnabled: boolean) | FA helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) | function | 否 | android,ios | yes | ## 遗留问题 diff --git a/zh-cn/react-native-safe-area-context.md b/zh-cn/react-native-safe-area-context.md index 1252bf0c..4fa64aac 100644 --- a/zh-cn/react-native-safe-area-context.md +++ b/zh-cn/react-native-safe-area-context.md @@ -18,7 +18,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -246,20 +246,20 @@ You should add `SafeAreaProvider` in your app root component. You may need to ad Note that providers should not be inside a View that is animated with Animated or inside a ScrollView since it can cause very frequent updates. -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------- | ---------------------------------------- | ------ | ---- | ---- | ---- | -| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | -| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- | +| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | +| `initialMetrics` | Can be used to provide the initial value for frame and insets, this allows rendering immediatly. See optimization for more information on how to use this prop. | object | no | All | yes | **组件 SafeAreaView** `SafeAreaView` is a regular View component with the safe area insets applied as padding or margin. -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------- | ---------------------------------------- | ------ | ---- | ---- | ---- | -| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | -| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes | -| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------- | ----------------------------------------------------------------------------------------------- | ------ | -------- | -------- | -------- | +| `Props` | Accepts all View props. Has a default style of {flex: 1}. | object | no | All | yes | +| `edges` | Sets the edges to apply the safe area insets to. Defaults to all. | array | no | All | yes | +| `mode` | Optional, padding (default) or margin. Apply the safe area to either the padding or the margin. | string | no | All | yes | ## 遗留问题 diff --git a/zh-cn/react-native-svg.md b/zh-cn/react-native-svg.md index 225878f1..52f4ced0 100644 --- a/zh-cn/react-native-svg.md +++ b/zh-cn/react-native-svg.md @@ -18,7 +18,7 @@ -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-svg/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-svg/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -240,12 +240,12 @@ ohpm install **Svg**：绘制组件的父组件 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :-----: | :--: | :-------------: | ---- | ---- | ---- | -| width | 组件宽度 | number\| string | Yes | All | Yes | -| height | 组件高度 | number\| string | Yes | All | Yes | -| viewBox | 组件视区 | string | No | All | Yes | -| color | 颜色 | string | No | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :-----: | :------: | :-------------: | -------- | -------- | -------- | +| width | 组件宽度 | number\| string | Yes | All | Yes | +| height | 组件高度 | number\| string | Yes | All | Yes | +| viewBox | 组件视区 | string | No | All | Yes | +| color | 颜色 | string | No | All | Yes | **G**：该元素是用于对其他 SVG 元素进行分组的容器 @@ -254,38 +254,38 @@ ohpm install **Path**： 路径绘制组件，根据绘制路径生成封闭的自定义形状 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :--: | :--------: | :----: | ---- | ---- | ---- | -| d | 路径绘制的命令字符串 | string | Yes | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :--: | :------------------: | :----: | -------- | -------- | -------- | +| d | 路径绘制的命令字符串 | string | Yes | All | Yes | **Rect**： 矩形绘制组件，根据角位置和宽高生成矩形形状 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :----: | :--------: | :-------------: | ---- | ---- | ---- | -| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | -| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | -| width | 元素宽度 | number\| string | Yes | All | Yes | -| height | 元素高度 | number\| string | Yes | All | Yes | -| rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | -| rx | 定义 y 轴上的半径 | number\| string | No | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :----: | :---------------: | :-------------: | -------- | -------- | -------- | +| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | +| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | +| width | 元素宽度 | number\| string | Yes | All | Yes | +| height | 元素高度 | number\| string | Yes | All | Yes | +| rx | 定义 x 轴上的半径 | number\| string | No | All | Yes | +| rx | 定义 y 轴上的半径 | number\| string | No | All | Yes | **Image**： 图像元素，支持 JPEG、PNG 格式 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| :----: | :--------: | :-------------: | ---- | ---- | ---- | -| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | -| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | -| width | 元素宽度 | number\| string | Yes | All | Yes | -| height | 元素高度 | number\| string | Yes | All | Yes | -| href | 图像资源引用 | source\| string | Yes | All | Yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| :----: | :---------------: | :-------------: | -------- | -------- | -------- | +| x | 在 x 轴上平移距离 | number\| string | No | All | Yes | +| y | 在 y 轴上平移距离 | number\| string | No | All | Yes | +| width | 元素宽度 | number\| string | Yes | All | Yes | +| height | 元素高度 | number\| string | Yes | All | Yes | +| href | 图像资源引用 | source\| string | Yes | All | Yes | **公共属性**：Common props 组件属性支持情况 -| 属性 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | G | Path | Rect | -| :---------: | :----------------: | :----: | :----: | :--: | ---- | ---- | ---- | ---- | -| fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ | -| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ | -| strokeWidth | 设置边框宽度 | number | 1 | No | All | | √ | √ | +| 属性 | 说明 | 类型 | 默认值 | 是否必填 | 原库平台 | G | Path | Rect | +| :---------: | :----------------------------------: | :----: | :----: | :------: | -------- | --- | ---- | ---- | +| fill | 设置填充区域颜色 | string | '#000' | No | All | | √ | √ | +| stroke | 设置边框颜色，不设置时，默认没有边框 | string | 'none' | No | All | | √ | √ | +| strokeWidth | 设置边框宽度 | number | 1 | No | All | | √ | √ | ## 遗留问题 diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index aafa01a8..f08b1b6e 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -12,14 +12,13 @@

- ## 安装与使用 进入到工程目录并输入以下命令： -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-video/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-video/releases)中获取库 tgz，通过使用本地依赖来安装本库。** #### **yarn** @@ -44,7 +43,7 @@ import RNCVideo from 'react-native-video' function RNCVideoDemo() { const videoRef = React.useRef(null); - + const [muted, setMuted] = useState(true); const [paused, setPaused] = useState(false); const [repeat, setRepeat] = useState(true); @@ -63,7 +62,7 @@ function RNCVideoDemo() { const [onVideoBuffer, setOnVideoBuffer] = useState("onVideoBuffer"); const [onPlaybackStalled, setOnPlaybackStalled] = useState("onPlaybackStalled"); const [onPlaybackResume, setOnPlaybackResume] = useState("onPlaybackResume"); - + return ( **false (default)** | bool | No | Android Exoplayer | yes | -| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | -| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | -| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | -| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | -| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | -| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | -| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | :----- | -------- | -------------------------------------------------------- | -------- | +| `source` | Sets the media source. You can pass an asset loaded via require or an object with a uri. | object | Yes | All | yes | +| `disableFocus` | Determines whether video audio should override background music/audio in Android devices.
**false (default)** | bool | No | Android Exoplayer | yes | +| `muted` | Controls whether the audio is muted.
**false (default)** - Don't mute audio | bool | No | All | yes | +| `paused` | Controls whether the media is paused.
**false (default)** - Don't pause the media | bool | No | All | yes | +| `repeat` | Determine whether to repeat the video when the end is reached.
**false (default)** - Don't repeat the video | bool | No | All | yes | +| `resizeMode` | Determines how to resize the video when the frame doesn't match the raw video dimensions.
**"none" (default)** - Don't apply resize | string | No | Android ExoPlayer, Android MediaPlayer, iOS, Windows UWP | yes | +| `volume` | Adjust the volume.
**1.0 (default)** - Play at full volume | number | No | All | yes | +| `poster` | An image to display while the video is loading
Value: string with a URL for the poster, e.g. "" | string | No | All | yes | +| `posterResizeMode` | Determines how to resize the poster image when the frame doesn't match the raw video dimensions..
**"contain" (default)**- Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding). | string | No | All | yes | ## 事件回调 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------------- | ---------------------------------------- | :------- | ---- | ---------------------------------------- | ---- | -| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | -| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | -| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | -| `onProgress` | Callback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing. | function | No | All | yes | -| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | -| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | -| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | -| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | -| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | -------- | +| `onLoad` | Callback function that is called when the media is loaded and ready to play. | function | No | All | yes | +| `onLoadStart` | Callback function that is called when the media starts loading. | function | No | All | yes | +| `onReadyForDisplay` | Callback function that is called when the first video frame is ready for display. This is when the poster is removed. | function | No | Android ExoPlayer, Android MediaPlayer, iOS, Web | yes | +| `onProgress` | Callback function that is called every progressUpdateInterval seconds with info about which position the media is currently playing. | function | No | All | yes | +| `onEnd` | Callback function that is called when the player reaches the end of the media. | function | No | All | yes | +| `onError` | Callback function that is called when the player experiences a playback error. | function | No | All | yes | +| `onBuffer` | Callback function that is called when the player buffers. | function | No | Android, iOS | yes | +| `onPlaybackStalled` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_START | function | No | Android MediaPlayer | yes | +| `onPlaybackResume` | Callback function that is MediaPlayer MEDIA_INFO_BUFFERING_END | function | No | Android MediaPlayer | yes | ## 静态方法 -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| -------- | ---------------------------------------- | :------- | ---- | ---- | ---- | -| `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No | All | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| -------- | -------------------------------------------------------------------------------- | :------- | -------- | -------- | -------- | +| `seek()` | Seek to the specified position represented by seconds. seconds is a float value. | function | No | All | yes | ## 遗留问题 -- [ ] source暂时只支持在线URL资源。 +- [ ] source 暂时只支持在线 URL 资源。 - [ ] 未适配无障碍 ## 其他 diff --git a/zh-cn/react-native-webview.md b/zh-cn/react-native-webview.md index 39e0fda6..edcd8268 100644 --- a/zh-cn/react-native-webview.md +++ b/zh-cn/react-native-webview.md @@ -14,7 +14,7 @@ 进入到工程目录并输入以下命令： -**正在npm发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-webview/releases)中获取库tgz，通过使用本地依赖来安装本库。** +**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-webview/releases)中获取库 tgz，通过使用本地依赖来安装本库。** ```bash yarn add xxx @@ -211,25 +211,25 @@ ohpm install 如下是 webview 已经鸿蒙化的属性： -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ---------------------------------------- | ---------------------------------------- | ---------------------------------------- | ---- | ----------------- | ---- | -| `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl | yes | All | yes | -| `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | -| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | -| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | -| `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | -| `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | -| `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android. | boolean | No | android | yes | -| `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | -| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | -| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | -| `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | -| `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | -| `textZoom?` | If the user has set a custom font size in the Android system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | -| ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | -| ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | -| ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | -| ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | -------- | ----------------- | -------- | +| `source` | Loads static HTML or a URI (with optional headers) in the WebView | One of:
**Load uri :**
uri
headers
**Static HTML :**
html
baseUrl | yes | All | yes | +| `injectedJavaScript?` | Set this to provide JavaScript that will be injected into the web page after the document finishes loading | string | No | All | yes | +| `originWhitelist?` | List of origin strings to allow being navigated to. | string[] | No | iOS,android,macOS | yes | +| `scalesPageToFit?` | Boolean that controls whether the web content is scaled to fit the view and enables the user to change the scale. | boolean | No | android | yes | +| `startInLoadingState?` | Boolean value that forces the WebView to show the loading view on the first load. | boolean | No | iOS,android,macOS | yes | +| `style?` | A style object that allow you to customize the WebView style. | Style | No | ALL | yes | +| `domStorageEnabled?` | Boolean value to control whether DOM Storage is enabled. Used only in Android. | boolean | No | android | yes | +| `javaScriptEnabled?` | Boolean value to enable JavaScript in the WebView. | boolean | No | All | yes | +| `showsHorizontalScrollIndicator?` | Boolean value that determines whether a horizontal scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | +| `showsVerticalScrollIndicator` | Boolean value that determines whether a vertical scroll indicator is shown in the WebView. | boolean | No | iOS,android,macOS | yes | +| `cacheEnabled?` | Sets whether WebView should use browser caching. | boolean | No | iOS,android,macOS | yes | +| `cacheMode?` | Overrides the way the cache is used. | string | No | android | yes | +| `textZoom?` | If the user has set a custom font size in the Android system, an undesirable scale of the site interface in WebView occurs. | number | No | android | yes | +| ` injectJavaScript?: (script: string) => void` | Executes the JavaScript string. | function | No | iOS,android,macOS | yes | +| ` onLoadEnd?: (event) => void` | Function that is invoked when the WebView load succeeds or fails used. | function | No | All | yes | +| ` onMessage?: (event) => void` | Function that is invoked when the webview calls window.ReactNativeWebView.postMessage. | function | No | iOS,android,macOS | yes | +| ` onShouldStartLoadWithRequest?: (event) => void` | Function that allows custom handling of any web view requests. | function | No | iOS,android,macOS | yes | ## 遗留问题 -- Gitee