diff --git a/README.md b/README.md index f689ef37e8c867df9de25a85a90c3496bfffca6c..6a2d3d0aed059e002a804337f5cd10914f78cd13 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 f689ef37e8c867df9de25a85a90c3496bfffca6c..74983f901e83a4efae9e8d7c1908629e87341beb 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 8eff75979a046a3115751f088780baf0752ac482..56fe3cdb7b9131c3ceb47000d8f4610b5a8de660 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,28 +203,28 @@ 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 | +| 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 | +| 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 | +| 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) diff --git a/zh-cn/react-native-SmartRefreshLayout.md b/zh-cn/react-native-SmartRefreshLayout.md index d3664fa0e50e5c27edf35ca35b95050902df8774..be495368d1a6a0173c15b4b22d20587e654986a9 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 @@ -35,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} @@ -63,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()} /> @@ -103,7 +116,7 @@ const App = () => { const styles = StyleSheet.create({ item: { padding: 16, - width: '100%', + width: "100%", height: 100, }, }); @@ -279,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 703b3b7392571c6e4134005e4928c6c177c93e06..1260dc904fe286e2b26396131928e3db60ed0108 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 ``` diff --git a/zh-cn/react-native-fast-image.md b/zh-cn/react-native-fast-image.md index 899ed296df51d485e1460ee6414f4b38f3ecef4a..1d572af51358526d1c76431a4d6c74954c554eed 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 ``` diff --git a/zh-cn/react-native-image-picker.md b/zh-cn/react-native-image-picker.md index f401639a405425a2b453778b61c5b84678491b7a..f7f7400f4fe91c3f1f25f2e20b5a23b972c2b3a6 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 diff --git a/zh-cn/react-native-linear-gradient.md b/zh-cn/react-native-linear-gradient.md index f742dc9b3f0a0f9221241122abed869367435462..1291c6b8e4eb687e701ab3edc3ef9658b9a8c38c 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 ``` diff --git a/zh-cn/react-native-masked-view.md b/zh-cn/react-native-masked-view.md index d31b21be82feb3196ce8ae7c2ebd5cf67bf6ba17..5cacc1b82061c73a8325922a7baab37828e61fb4 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 ``` diff --git a/zh-cn/react-native-pager-view.md b/zh-cn/react-native-pager-view.md index 3a59eb4013a31665c9546deb41aabb582d8ed18f..5235ec7e24dfa0293c80e145fd029c67401ecdf8 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 diff --git a/zh-cn/react-native-safe-area-context.md b/zh-cn/react-native-safe-area-context.md index d3525e75d3980a02abef285725d30db8838abc7f..4fa64aac52ab5b92ab6e02d622dc5853c0fff408 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 diff --git a/zh-cn/react-native-svg.md b/zh-cn/react-native-svg.md index f7aa4a64ba942f9dfc6470528fcec922aa7096fa..52f4ced04baad39e34d9f88a9f1a6e5d5e14c035 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 diff --git a/zh-cn/react-native-video.md b/zh-cn/react-native-video.md index 4fbff613a01d3673777f6236de895aa41776b637..f08b1b6e3b3052ded2b1bd18b86a48d0a6b77eb2 100644 --- a/zh-cn/react-native-video.md +++ b/zh-cn/react-native-video.md @@ -12,23 +12,24 @@

- ## 安装与使用 进入到工程目录并输入以下命令： +**正在 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 ``` @@ -42,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); @@ -61,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 | +| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | +| ------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | :------- | -------- | ------------------------------------------------ | -------- | +| `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 | +| `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 | ## 遗留问题 -- [ ] source暂时只支持在线URL资源。 +- [ ] source 暂时只支持在线 URL 资源。 - [ ] 未适配无障碍 ## 其他 diff --git a/zh-cn/react-native-webview.md b/zh-cn/react-native-webview.md index ff7cbd85572833ec5139695b878aa6bd869ca113..edcd8268c02061bd113f4b59dd42e6a2608f6533 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 ``` 下面的代码展示了这个库的基本使用场景：