From 8007fd0198508cee2fe9e94bb263b60f4781c482 Mon Sep 17 00:00:00 2001 From: d019119 <675961294@qq.com> Date: Wed, 20 Mar 2024 16:09:33 +0800 Subject: [PATCH 1/6] =?UTF-8?q?[Issues:=20#I9A3TM]=20=E6=B7=BB=E5=8A=A0=20?= =?UTF-8?q?react-native-swiper=20=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-swiper_zh.md | 158 +++++++++++++++++++++++++++++++++ 1 file changed, 158 insertions(+) create mode 100644 1224/react-native-swiper_zh.md diff --git a/1224/react-native-swiper_zh.md b/1224/react-native-swiper_zh.md new file mode 100644 index 00000000..4a3f9f8d --- /dev/null +++ b/1224/react-native-swiper_zh.md @@ -0,0 +1,158 @@ +> 模板版本：v1.6.0 + +

+

react-native-swiper

+

+

+ + License + +

+ + +> [!tip] [Github 地址](https://github.com/leecade/react-native-swiper) + +## 安装与使用 + +#### **npm** + +```bash +npm i react-native-swiper --save +``` + +#### **yarn** + +```bash +yarn add react-native-swiper +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import React, { Component } from 'react' +import { AppRegistry, StyleSheet, Text, View } from 'react-native' + +import Swiper from 'react-native-swiper' + +const styles = StyleSheet.create({ + wrapper: {}, + slide1: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#9DD6EB' + }, + slide2: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#97CAE5' + }, + slide3: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#92BBD9' + }, + text: { + color: '#fff', + fontSize: 30, + fontWeight: 'bold' + } +}) + +export default class SwiperComponent extends Component { + render() { + return ( + + + Hello Swiper + + + Beautiful + + + And simple + + + ) + } +} + +AppRegistry.registerComponent('myproject', () => SwiperComponent) +``` + +### 兼容性 + +在下述版本验证通过: + +1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; +2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; + +#### 属性 + +##### 基础 + +| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | +| -------------- | ----------------------- | -------- | --------------- | -------- | +| horizontal | 轮播组件横向滚动 | boolean | true | yes | +| loop | 设置为false禁止循环滚动 | boolean | true | yes | +| index | 轮播组件初始索引位置 | number | 0 | yes | +| showsButtons | 设置为true显示控制按钮 | boolean | false | yes | +| autoplay | 设置为true会自动播放 | boolean | false | yes | +| onIndexChanged | 滑动索引变化时调用 | function | (index) => null | yes | + +##### 自定义属性 + +| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | +| ----------------- | --------------------------------------- | ------- | --------------------- | -------- | +| width | 如果没有指定默认是全屏 | number | - | yes | +| height | 如果没有指定默认是全屏 | number | - | yes | +| style | 添加自定义样式 | object | {...} | yes | +| containerStyle | 添加自定义样式 | object | {...} | yes | +| loadMinimal | 是否只加载当前索引位置的轮播子组件 | boolean | false | yes | +| loadMinimalSize | 配合loadMinimal使用，可加载的子组件数量 | number | 1 | yes | +| loadMinimalLoader | 当轮播子组件不加载时候的默认显示组件 | element | | yes | + +##### 分页 + +| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | +| ---------------- | ---------------------------- | -------- | ------------------------------------------------------------ | -------- | +| showsPagination | 设置为true显示分页标记 | boolean | true | yes | +| paginationStyle | 自定义分页样式去覆盖默认样式 | style | {...} | yes | +| renderPagination | 自定义如果显示分页样式 | function | - | yes | +| dot | 允许自定义dot组件 | element | width: 8, height: 8,borderRadius: 4,
marginLeft: 3, marginRight: 3,
marginTop: 3, marginBottom: 3,}} /> | yes | +| activeDot | 允许自定义active-dot组件 | element | width: 8, height: 8, borderRadius: 4,
marginLeft: 3, marginRight: 3,
marginTop: 3, marginBottom: 3,}} /> | yes | +| dotStyle | 允许自定义dotstyle | object | - | yes | +| dotColor | 允许自定义dotstyle | string | - | yes | +| activeDotColor | 允许自定义activeDot | string | - | yes | +| activeDotStyle | 允许自定义activeDot | object | - | yes | + +##### 自动播放 + +| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | +| ----------------- | ----------------------------- | ------- | ------ | -------- | +| autoplay | 默认自动播放 | boolean | true | yes | +| autoplayTimeout | 自动播放延迟时间（默认2.5秒） | number | 2.5 | yes | +| autoplayDirection | 循环自动播放 | boolean | true | yes | + +##### 控制按钮 + +| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | +| ------------------ | ------------------------ | ------- | ------------------------------------------------------------ | -------- | +| showsButtons | 设置为true，显示控制按钮 | boolean | true | yes | +| buttonWrapperStyle | 自定义buttonWrapper样式 | style | {backgroundColor: 'transparent', flexDirection: 'row',
position: 'absolute', top: 0, left: 0, flex: 1,
paddingHorizontal: 10, paddingVertical: 10,
justifyContent: 'space-between', alignItems: 'center'} | yes | +| | | | | | +| | | | | | + + + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/facebook/prop-types/blob/v15.8.1/LICENSE) ，请自由地享受和参与开源。 -- Gitee From bf603bf4faf72a94d230d2a62d2e0a64ff723c97 Mon Sep 17 00:00:00 2001 From: d019119 <675961294@qq.com> Date: Wed, 20 Mar 2024 19:01:29 +0800 Subject: [PATCH 2/6] =?UTF-8?q?[Issues:=20#I9A3TM]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-swiper=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/workspace.xml | 56 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 .idea/workspace.xml diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 00000000..8670c715 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,56 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file -- Gitee From 933f8184b3f85ae46534f646ba4c219c41c4d26d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E4=BF=8A=E6=B6=9B?= <675961294@qq.com> Date: Wed, 20 Mar 2024 12:25:55 +0000 Subject: [PATCH 3/6] =?UTF-8?q?=E5=88=A0=E9=99=A4=E6=96=87=E4=BB=B6=20.ide?= =?UTF-8?q?a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .idea/workspace.xml | 56 --------------------------------------------- 1 file changed, 56 deletions(-) delete mode 100644 .idea/workspace.xml diff --git a/.idea/workspace.xml b/.idea/workspace.xml deleted file mode 100644 index 8670c715..00000000 --- a/.idea/workspace.xml +++ /dev/null @@ -1,56 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file -- Gitee From 4111e4ff3fdd193b297287f45b21884090f41bb0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E4=BF=8A=E6=B6=9B?= <675961294@qq.com> Date: Wed, 20 Mar 2024 20:33:49 +0800 Subject: [PATCH 4/6] =?UTF-8?q?[Issues:=20#I9A3TM]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-swiper=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-swiper.md | 224 +++++++++++++++++++++++++++++++++ 1224/react-native-swiper_zh.md | 158 ----------------------- 2 files changed, 224 insertions(+), 158 deletions(-) create mode 100644 1224/react-native-swiper.md delete mode 100644 1224/react-native-swiper_zh.md diff --git a/1224/react-native-swiper.md b/1224/react-native-swiper.md new file mode 100644 index 00000000..8cac8f65 --- /dev/null +++ b/1224/react-native-swiper.md @@ -0,0 +1,224 @@ +> 模板版本：v0.1.3 + +

+

react-native-swiper

+

+

+ + License + +

+ + + +> [!tip] [Github 地址](https://github.com/leecade/react-native-swiper) + +## 安装与使用 + + + +#### **npm** + +```bash +npm i react-native-swiper --save +``` + +#### **yarn** + +```bash +yarn add react-native-swiper +``` + + + +快速使用： + +```js +import React, { Component } from 'react' +import { AppRegistry, StyleSheet, Text, View } from 'react-native' + +import Swiper from 'react-native-swiper' + +const styles = StyleSheet.create({ + wrapper: {}, + slide1: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#9DD6EB' + }, + slide2: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#97CAE5' + }, + slide3: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#92BBD9' + }, + text: { + color: '#fff', + fontSize: 30, + fontWeight: 'bold' + } +}) + +export default class SwiperComponent extends Component { + render() { + return ( + + + Hello Swiper + + + Beautiful + + + And simple + + + ) + } +} + +AppRegistry.registerComponent('myproject', () => SwiperComponent) +``` + +### 兼容性 + +在下述版本验证通过: +RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.68; + +### 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +#### basics + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :------------- | :-------------: | :------: | :----------------------------------------------------------- | -------- | ----------------- | +| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | +| loop | true | `bool` | Set to `false` to disable continuous loop mode. | All | YES | +| index | 0 | `number` | Index number of initial slide. | All | YES | +| showsButtons | false | `bool` | Set to `true` make control buttons visible. | All | YES | +| autoplay | false | `bool` | Set to `true` enable auto play mode. | All | YES | +| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped | All | YES | + +#### Custom basic style & content + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :---------------- | :---------------------: | :-------: | :----------------------------------------------------------- | -------- | ----------------- | +| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. | All | YES | +| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. | All | YES | +| style | {...} | `style` | See default style in source. | All | YES | +| containerStyle | {...} | `style` | See default container style in source. | All | YES | +| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. | All | YES | +| loadMinimalSize | 1 | `number` | see `loadMinimal` | All | YES | +| loadMinimalLoader | `` | `element` | Custom loader to display when slides aren't loaded | All | YES | + +#### Pagination + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :--------------- | :----------------------------------------------------------: | :--------: | :----------------------------------------------------------- | -------- | ----------------- | +| showsPagination | true | `bool` | Set to `true` make pagination visible. | All | YES | +| paginationStyle | {...} | `style` | Custom styles will merge with the default styles. | All | YES | +| renderPagination | - | `function` | Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots. | All | YES | +| dot | `` | `element` | Allow custom the dot element. | All | YES | +| activeDot | `` | `element` | Allow custom the active-dot element. | All | YES | +| dotStyle | - | `object` | Allow custom the dot element. | All | YES | +| dotColor | - | `string` | Allow custom the dot element. | All | YES | +| activeDotColor | - | `string` | Allow custom the active-dot element. | All | YES | +| activeDotStyle | - | `object` | Allow custom the active-dot element. | All | YES | + +#### Autoplay + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :---------------- | :-----: | :------: | :----------------------------------------------- | -------- | ----------------- | +| autoplay | true | `bool` | Set to `true` enable auto play mode. | All | YES | +| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). | All | YES | +| autoplayDirection | true | `bool` | Cycle direction control. | All | YES | + +#### Control buttons + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :----------------- | :----------------------------------------------------------: | :-------: | :------------------------------------------ | -------- | ----------------- | +| showsButtons | true | `bool` | Set to `true` make control buttons visible. | All | YES | +| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` | `style` | Custom styles. | All | YES | +| nextButton | `›` | `element` | Allow custom the next button. | All | YES | +| prevButton | `‹` | `element` | Allow custom the prev button. | All | YES | + +#### Props of Children + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :---- | :----------------------------------: | :-------: | :----------------------------------------------------------- | -------- | ----------------- | +| style | {...} | `style` | Custom styles will merge with the default styles. | All | YES | +| title | {...} | `element` | If this parameter is not specified, will not render the title. | All | YES | + +#### Basic props of `` + +| Prop | Default | Type | Description | platform | HarmonyOS Support | +| :------------------------------- | :-----: | :----: | :----------------------------------------------------------- | -------- | ----------------- | +| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | +| pagingEnabled | true | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. | All | YES | +| showsHorizontalScrollIndicator | false | `bool` | Set to `true` if you want to show horizontal scroll bar. | All | YES | +| showsVerticalScrollIndicator | false | `bool` | Set to `true` if you want to show vertical scroll bar. | All | YES | +| bounces | false | `bool` | If `true`, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If `false`, it disables all bouncing even if the alwaysBounce\* props are true. | All | YES | +| scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped. | All | 暂时不支持 | +| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. | All | YES | +| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. | All | 暂时不支持 | +| scrollEnabled | true | `bool` | Enables/Disables swiping | All | YES | + +> @see: http://facebook.github.io/react-native/docs/scrollview.html + +#### Supported ScrollResponder + +| Prop | Params | Type | Description | platform | HarmonyOS Support | +| :------------------ | :-----------------------: | :--------: | :---------------------------------------------------------- | -------- | ----------------- | +| onScrollBeginDrag | `e` / `state` / `context` | `function` | When animation begins after letting up | All | YES | +| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce | All | YES | +| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` | All | YES | +| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase | All | YES | +| onTouchEnd | `e` / `state` / `context` | `function` | You could hold the touch start for a long time | All | YES | +| onResponderRelease | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before \* lifting | All | YES | + +> Note: each ScrollResponder be injected with two params: `state` and `context`, you can get `state` and `context`(ref to swiper's `this`) from params, for example: + +```jsx +var swiper = React.createClass({ + _onMomentumScrollEnd: function (e, state, context) { + console.log(state, context.state) + }, + render: function() { + return ( + + ) + } +}) +``` + +> More ScrollResponder info, see: https://github.com/facebook/react-native/blob/master/Libraries/Components/ScrollResponder.js + +### 方法 + +#### scrollBy(index, animated) + +| Name | Type | default | Description | platform | HarmonyOS Support | +| :------- | :------: | :---------: | :----------- | -------- | ----------------- | +| index | `number` | `undefined` | offset index | All | YES | +| animated | `bool` | `true` | offset index | All | YES | + +### 遗留问题 + +### 其他 + +### 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/leecade/react-native-swiper/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-native-swiper_zh.md b/1224/react-native-swiper_zh.md deleted file mode 100644 index 4a3f9f8d..00000000 --- a/1224/react-native-swiper_zh.md +++ /dev/null @@ -1,158 +0,0 @@ -> 模板版本：v1.6.0 - -

-

react-native-swiper

-

-

- - License - -

- - -> [!tip] [Github 地址](https://github.com/leecade/react-native-swiper) - -## 安装与使用 - -#### **npm** - -```bash -npm i react-native-swiper --save -``` - -#### **yarn** - -```bash -yarn add react-native-swiper -``` - - - -下面的代码展示了这个库的基本使用场景： - -```js -import React, { Component } from 'react' -import { AppRegistry, StyleSheet, Text, View } from 'react-native' - -import Swiper from 'react-native-swiper' - -const styles = StyleSheet.create({ - wrapper: {}, - slide1: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#9DD6EB' - }, - slide2: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#97CAE5' - }, - slide3: { - flex: 1, - justifyContent: 'center', - alignItems: 'center', - backgroundColor: '#92BBD9' - }, - text: { - color: '#fff', - fontSize: 30, - fontWeight: 'bold' - } -}) - -export default class SwiperComponent extends Component { - render() { - return ( - - - Hello Swiper - - - Beautiful - - - And simple - - - ) - } -} - -AppRegistry.registerComponent('myproject', () => SwiperComponent) -``` - -### 兼容性 - -在下述版本验证通过: - -1. RNOH：0.72.11; SDK：OpenHarmony(api11) 4.1.0.53; IDE：DevEco Studio 4.1.3.412; ROM：2.0.0.52; -2. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58; - -#### 属性 - -##### 基础 - -| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | -| -------------- | ----------------------- | -------- | --------------- | -------- | -| horizontal | 轮播组件横向滚动 | boolean | true | yes | -| loop | 设置为false禁止循环滚动 | boolean | true | yes | -| index | 轮播组件初始索引位置 | number | 0 | yes | -| showsButtons | 设置为true显示控制按钮 | boolean | false | yes | -| autoplay | 设置为true会自动播放 | boolean | false | yes | -| onIndexChanged | 滑动索引变化时调用 | function | (index) => null | yes | - -##### 自定义属性 - -| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | -| ----------------- | --------------------------------------- | ------- | --------------------- | -------- | -| width | 如果没有指定默认是全屏 | number | - | yes | -| height | 如果没有指定默认是全屏 | number | - | yes | -| style | 添加自定义样式 | object | {...} | yes | -| containerStyle | 添加自定义样式 | object | {...} | yes | -| loadMinimal | 是否只加载当前索引位置的轮播子组件 | boolean | false | yes | -| loadMinimalSize | 配合loadMinimal使用，可加载的子组件数量 | number | 1 | yes | -| loadMinimalLoader | 当轮播子组件不加载时候的默认显示组件 | element | | yes | - -##### 分页 - -| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | -| ---------------- | ---------------------------- | -------- | ------------------------------------------------------------ | -------- | -| showsPagination | 设置为true显示分页标记 | boolean | true | yes | -| paginationStyle | 自定义分页样式去覆盖默认样式 | style | {...} | yes | -| renderPagination | 自定义如果显示分页样式 | function | - | yes | -| dot | 允许自定义dot组件 | element | width: 8, height: 8,borderRadius: 4,
marginLeft: 3, marginRight: 3,
marginTop: 3, marginBottom: 3,}} /> | yes | -| activeDot | 允许自定义active-dot组件 | element | width: 8, height: 8, borderRadius: 4,
marginLeft: 3, marginRight: 3,
marginTop: 3, marginBottom: 3,}} /> | yes | -| dotStyle | 允许自定义dotstyle | object | - | yes | -| dotColor | 允许自定义dotstyle | string | - | yes | -| activeDotColor | 允许自定义activeDot | string | - | yes | -| activeDotStyle | 允许自定义activeDot | object | - | yes | - -##### 自动播放 - -| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | -| ----------------- | ----------------------------- | ------- | ------ | -------- | -| autoplay | 默认自动播放 | boolean | true | yes | -| autoplayTimeout | 自动播放延迟时间（默认2.5秒） | number | 2.5 | yes | -| autoplayDirection | 循环自动播放 | boolean | true | yes | - -##### 控制按钮 - -| 名称 | 说明 | 类型 | 默认值 | 鸿蒙支持 | -| ------------------ | ------------------------ | ------- | ------------------------------------------------------------ | -------- | -| showsButtons | 设置为true，显示控制按钮 | boolean | true | yes | -| buttonWrapperStyle | 自定义buttonWrapper样式 | style | {backgroundColor: 'transparent', flexDirection: 'row',
position: 'absolute', top: 0, left: 0, flex: 1,
paddingHorizontal: 10, paddingVertical: 10,
justifyContent: 'space-between', alignItems: 'center'} | yes | -| | | | | | -| | | | | | - - - -## 遗留问题 - -## 其他 - -## 开源协议 - -本项目基于 [The MIT License (MIT)](https://github.com/facebook/prop-types/blob/v15.8.1/LICENSE) ，请自由地享受和参与开源。 -- Gitee From 957a8ab6012f22c4fe3a962d9b202f942740858a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E4=BF=8A=E6=B6=9B?= <675961294@qq.com> Date: Thu, 21 Mar 2024 15:31:45 +0800 Subject: [PATCH 5/6] =?UTF-8?q?[Issues:=20#I9A3TM]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-swiper=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-swiper.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/1224/react-native-swiper.md b/1224/react-native-swiper.md index 8cac8f65..bf0a1f33 100644 --- a/1224/react-native-swiper.md +++ b/1224/react-native-swiper.md @@ -20,13 +20,13 @@ #### **npm** ```bash -npm i react-native-swiper --save +npm i react-native-swiper@1.6.0 --save ``` #### **yarn** ```bash -yarn add react-native-swiper +yarn add react-native-swiper@1.6.0 ``` -- Gitee From 05abc63d91f04fefc8d511959b52fd02eec03dba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=9D=9C=E4=BF=8A=E6=B6=9B?= <675961294@qq.com> Date: Thu, 21 Mar 2024 18:43:07 +0800 Subject: [PATCH 6/6] =?UTF-8?q?[Issues:=20#I9A3TM]=20=E6=9B=B4=E6=96=B0rea?= =?UTF-8?q?ct-native-swiper=E6=93=8D=E4=BD=9C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 1224/react-native-swiper.md | 136 +++++++++++++++++++----------------- 1 file changed, 70 insertions(+), 66 deletions(-) diff --git a/1224/react-native-swiper.md b/1224/react-native-swiper.md index bf0a1f33..453674e7 100644 --- a/1224/react-native-swiper.md +++ b/1224/react-native-swiper.md @@ -100,91 +100,91 @@ RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1 #### basics -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :------------- | :-------------: | :------: | :----------------------------------------------------------- | -------- | ----------------- | -| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | -| loop | true | `bool` | Set to `false` to disable continuous loop mode. | All | YES | -| index | 0 | `number` | Index number of initial slide. | All | YES | -| showsButtons | false | `bool` | Set to `true` make control buttons visible. | All | YES | -| autoplay | false | `bool` | Set to `true` enable auto play mode. | All | YES | -| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :------------- | :-------------: | :------: | :----------------------------------------------------------- | -------- | ----------------- | ------ | +| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | -- | +| loop | true | `bool` | Set to `false` to disable continuous loop mode. | All | YES | -- | +| index | 0 | `number` | Index number of initial slide. | All | YES | -- | +| showsButtons | false | `bool` | Set to `true` make control buttons visible. | All | YES | -- | +| autoplay | false | `bool` | Set to `true` enable auto play mode. | All | YES | -- | +| onIndexChanged | (index) => null | `func` | Called with the new index when the user swiped | All | YES | -- | #### Custom basic style & content -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :---------------- | :---------------------: | :-------: | :----------------------------------------------------------- | -------- | ----------------- | -| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. | All | YES | -| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. | All | YES | -| style | {...} | `style` | See default style in source. | All | YES | -| containerStyle | {...} | `style` | See default container style in source. | All | YES | -| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. | All | YES | -| loadMinimalSize | 1 | `number` | see `loadMinimal` | All | YES | -| loadMinimalLoader | `` | `element` | Custom loader to display when slides aren't loaded | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :---------------- | :---------------------: | :-------: | :----------------------------------------------------------- | -------- | ----------------- | ------ | +| width | - | `number` | If no specify default enable fullscreen mode by `flex: 1`. | All | YES | -- | +| height | - | `number` | If no specify default fullscreen mode by `flex: 1`. | All | YES | -- | +| style | {...} | `style` | See default style in source. | All | YES | -- | +| containerStyle | {...} | `style` | See default container style in source. | All | YES | -- | +| loadMinimal | false | `bool` | Only load current index slide , `loadMinimalSize` slides before and after. | All | YES | -- | +| loadMinimalSize | 1 | `number` | see `loadMinimal` | All | YES | -- | +| loadMinimalLoader | `` | `element` | Custom loader to display when slides aren't loaded | All | YES | -- | #### Pagination -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :--------------- | :----------------------------------------------------------: | :--------: | :----------------------------------------------------------- | -------- | ----------------- | -| showsPagination | true | `bool` | Set to `true` make pagination visible. | All | YES | -| paginationStyle | {...} | `style` | Custom styles will merge with the default styles. | All | YES | -| renderPagination | - | `function` | Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots. | All | YES | -| dot | `` | `element` | Allow custom the dot element. | All | YES | -| activeDot | `` | `element` | Allow custom the active-dot element. | All | YES | -| dotStyle | - | `object` | Allow custom the dot element. | All | YES | -| dotColor | - | `string` | Allow custom the dot element. | All | YES | -| activeDotColor | - | `string` | Allow custom the active-dot element. | All | YES | -| activeDotStyle | - | `object` | Allow custom the active-dot element. | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :--------------- | :----------------------------------------------------------: | :--------: | :----------------------------------------------------------- | -------- | ----------------- | ------ | +| showsPagination | true | `bool` | Set to `true` make pagination visible. | All | YES | -- | +| paginationStyle | {...} | `style` | Custom styles will merge with the default styles. | All | YES | -- | +| renderPagination | - | `function` | Complete control how to render pagination with three params (`index`, `total`, `context`) ref to `this.state.index` / `this.state.total` / `this`, For example: show numbers instead of dots. | All | YES | -- | +| dot | `` | `element` | Allow custom the dot element. | All | YES | -- | +| activeDot | `` | `element` | Allow custom the active-dot element. | All | YES | -- | +| dotStyle | - | `object` | Allow custom the dot element. | All | YES | -- | +| dotColor | - | `string` | Allow custom the dot element. | All | YES | -- | +| activeDotColor | - | `string` | Allow custom the active-dot element. | All | YES | -- | +| activeDotStyle | - | `object` | Allow custom the active-dot element. | All | YES | -- | #### Autoplay -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :---------------- | :-----: | :------: | :----------------------------------------------- | -------- | ----------------- | -| autoplay | true | `bool` | Set to `true` enable auto play mode. | All | YES | -| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). | All | YES | -| autoplayDirection | true | `bool` | Cycle direction control. | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :---------------- | :-----: | :------: | :----------------------------------------------- | -------- | ----------------- | ------ | +| autoplay | true | `bool` | Set to `true` enable auto play mode. | All | YES | -- | +| autoplayTimeout | 2.5 | `number` | Delay between auto play transitions (in second). | All | YES | -- | +| autoplayDirection | true | `bool` | Cycle direction control. | All | YES | -- | #### Control buttons -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :----------------- | :----------------------------------------------------------: | :-------: | :------------------------------------------ | -------- | ----------------- | -| showsButtons | true | `bool` | Set to `true` make control buttons visible. | All | YES | -| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` | `style` | Custom styles. | All | YES | -| nextButton | `›` | `element` | Allow custom the next button. | All | YES | -| prevButton | `‹` | `element` | Allow custom the prev button. | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :----------------- | :----------------------------------------------------------: | :-------: | :------------------------------------------ | -------- | ----------------- | ------ | +| showsButtons | true | `bool` | Set to `true` make control buttons visible. | All | YES | -- | +| buttonWrapperStyle | `{backgroundColor: 'transparent', flexDirection: 'row', position: 'absolute', top: 0, left: 0, flex: 1, paddingHorizontal: 10, paddingVertical: 10, justifyContent: 'space-between', alignItems: 'center'}` | `style` | Custom styles. | All | YES | -- | +| nextButton | `›` | `element` | Allow custom the next button. | All | YES | -- | +| prevButton | `‹` | `element` | Allow custom the prev button. | All | YES | -- | #### Props of Children -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :---- | :----------------------------------: | :-------: | :----------------------------------------------------------- | -------- | ----------------- | -| style | {...} | `style` | Custom styles will merge with the default styles. | All | YES | -| title | {...} | `element` | If this parameter is not specified, will not render the title. | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :---- | :----------------------------------: | :-------: | :----------------------------------------------------------- | -------- | ----------------- | ------ | +| style | {...} | `style` | Custom styles will merge with the default styles. | All | YES | -- | +| title | {...} | `element` | If this parameter is not specified, will not render the title. | All | YES | -- | #### Basic props of `` -| Prop | Default | Type | Description | platform | HarmonyOS Support | -| :------------------------------- | :-----: | :----: | :----------------------------------------------------------- | -------- | ----------------- | -| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | -| pagingEnabled | true | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. | All | YES | -| showsHorizontalScrollIndicator | false | `bool` | Set to `true` if you want to show horizontal scroll bar. | All | YES | -| showsVerticalScrollIndicator | false | `bool` | Set to `true` if you want to show vertical scroll bar. | All | YES | -| bounces | false | `bool` | If `true`, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If `false`, it disables all bouncing even if the alwaysBounce\* props are true. | All | YES | -| scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped. | All | 暂时不支持 | -| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. | All | YES | -| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. | All | 暂时不支持 | -| scrollEnabled | true | `bool` | Enables/Disables swiping | All | YES | +| Prop | Default | Type | Description | platform | HarmonyOS Support | remark | +| :------------------------------- | :-----: | :----: | :----------------------------------------------------------- | -------- | ----------------- | ----------------- | +| horizontal | true | `bool` | If `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column. | All | YES | -- | +| pagingEnabled | true | `bool` | If true, the scroll view stops on multiples of the scroll view's size when scrolling. This can be used for horizontal pagination. | All | YES | -- | +| showsHorizontalScrollIndicator | false | `bool` | Set to `true` if you want to show horizontal scroll bar. | All | YES | -- | +| showsVerticalScrollIndicator | false | `bool` | Set to `true` if you want to show vertical scroll bar. | All | YES | -- | +| bounces | false | `bool` | If `true`, the scroll view bounces when it reaches the end of the content if the content is larger then the scroll view along the axis of the scroll direction. If `false`, it disables all bouncing even if the alwaysBounce\* props are true. | All | YES | -- | +| scrollsToTop | false | `bool` | If true, the scroll view scrolls to top when the status bar is tapped. | All | NO | 组件属性继承RNOH scrollview,当前RNOH中的scrollsToTop暂时不支持 | +| removeClippedSubviews | true | `bool` | If true, offscreen child views (whose overflow value is hidden) are removed from their native backing superview when offscreen. This canimprove scrolling performance on long lists. | All | NO | 组件属性继承RNOH scrollview,当前RNOH中的removeClippedSubviews暂时不支持 | +| automaticallyAdjustContentInsets | false | `bool` | Set to `true` if you need adjust content insets automation. | All | NO | 组件属性继承RNOH scrollview,当前RNOH中的automaticallyAdjustContentInsets暂时不支持 | +| scrollEnabled | true | `bool` | Enables/Disables swiping | All | YES | -- | > @see: http://facebook.github.io/react-native/docs/scrollview.html #### Supported ScrollResponder -| Prop | Params | Type | Description | platform | HarmonyOS Support | -| :------------------ | :-----------------------: | :--------: | :---------------------------------------------------------- | -------- | ----------------- | -| onScrollBeginDrag | `e` / `state` / `context` | `function` | When animation begins after letting up | All | YES | -| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce | All | YES | -| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` | All | YES | -| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase | All | YES | -| onTouchEnd | `e` / `state` / `context` | `function` | You could hold the touch start for a long time | All | YES | -| onResponderRelease | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before \* lifting | All | YES | +| Prop | Params | Type | Description | platform | HarmonyOS Support | remark | +| :------------------ | :-----------------------: | :--------: | :---------------------------------------------------------- | -------- | ----------------- | ------ | +| onScrollBeginDrag | `e` / `state` / `context` | `function` | When animation begins after letting up | All | YES | -- | +| onMomentumScrollEnd | `e` / `state` / `context` | `function` | Makes no sense why this occurs first during bounce | All | YES | -- | +| onTouchStartCapture | `e` / `state` / `context` | `function` | Immediately after `onMomentumScrollEnd` | All | YES | -- | +| onTouchStart | `e` / `state` / `context` | `function` | Same, but bubble phase | All | YES | -- | +| onTouchEnd | `e` / `state` / `context` | `function` | You could hold the touch start for a long time | All | YES | -- | +| onResponderRelease | `e` / `state` / `context` | `function` | When lifting up - you could pause forever before \* lifting | All | YES | -- | > Note: each ScrollResponder be injected with two params: `state` and `context`, you can get `state` and `context`(ref to swiper's `this`) from params, for example: @@ -210,13 +210,17 @@ var swiper = React.createClass({ #### scrollBy(index, animated) -| Name | Type | default | Description | platform | HarmonyOS Support | -| :------- | :------: | :---------: | :----------- | -------- | ----------------- | -| index | `number` | `undefined` | offset index | All | YES | -| animated | `bool` | `true` | offset index | All | YES | +| Name | Type | default | Description | platform | HarmonyOS Support | remark | +| :------- | :------: | :---------: | :----------- | -------- | ----------------- | ------ | +| index | `number` | `undefined` | offset index | All | YES | -- | +| animated | `bool` | `true` | offset index | All | YES | -- | ### 遗留问题 +- [x] 组件属性继承RNOH scrollview,当前RNOH中的scrollsToTop暂时不支持 +- [x] ​ 组件属性继承RNOH scrollview,当前RNOH中的removeClippedSubviews暂时不支持 +- [x] 组件属性继承RNOH scrollview,当前RNOH中的automaticallyAdjustContentInsets暂时不支持 + ### 其他 ### 开源协议 -- Gitee