diff --git a/en/react-native-recaptcha-that-works.md b/en/react-native-recaptcha-that-works.md index 4515768ce0467b3c133086866cfdaa235f729a90..9928bb0309c7caeef910e57161200bbf941fb92f 100644 --- a/en/react-native-recaptcha-that-works.md +++ b/en/react-native-recaptcha-that-works.md @@ -15,6 +15,14 @@ > [!TIP] [ GitHub address](https://github.com/douglasjunior/react-native-recaptcha-that-works) +Please refer to the Releases page of the third-party library for the corresponding version information: + +| Third-party Library Version | Supported RN Version | +|-------|---------- | +| 2.0.0 | 0.72/0.77 | + +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. + ## Installation and Usage Go to the project directory and execute the following instruction: @@ -130,6 +138,7 @@ This document is verified based on the following versions: 1. RNOH: 0.72.28; OH SDK: HarmonyOS-Next-DB2 5.0.0.31 (API Version 12 Beta2); IDE: DevEco Studio: 5.0.3.500; ROM: 3.0.0.31; 2. RNOH: 0.72.33; SDK:OpenHarmony 5.0.0.71(API Version 12 Release); IDE:DevEco Studio 5.0.3.900; ROM:NEXT.0.0.71; +3. RNOH: 0.77.18; SDK:HarmonyOS 6.0.0.47 (API Version 20); IDE:DevEco Studio 6.0.0.858; ROM:6.0.0.107; ## Properties diff --git a/en/react-native-snap-carousel.md b/en/react-native-snap-carousel.md index 7f49c4bb89ecefbd65867f86450a521410bf7c8a..1e307f58cf260c1fd32d05d6e31d6fa2b7bd29e2 100644 --- a/en/react-native-snap-carousel.md +++ b/en/react-native-snap-carousel.md @@ -14,26 +14,41 @@ > [!TIP] [GitHub address](https://github.com/react-native-oh-library/react-native-snap-carousel) -## Installation and Usage +Please refer to the Releases page of the third-party library for the corresponding version information: -Find the matching version information in the release address of a third-party library: [@react-native-oh-library/react-native-snap-carousel Releases](https://github.com/react-native-oh-library/react-native-snap-carousel/releases).For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +| Third-party Library Version | Release Information | Supported RN Version | +|-------| ------------------------------------------------------------ | ---------- | +| 3.9.1 | [@react-native-oh-tpl/react-native-snap-carousel Releases](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) | 0.72 | +| 3.10.0 | [@react-native-ohos/react-native-snap-carousel Releases]() | 0.77 | -Go to the project directory and execute the following instruction: +For older versions that are not published to npm, please refer to the [installation guide](/en/tgz-usage-en.md) to install the tgz package. +## Installation and Usage +Go to the project directory and execute the following instruction: #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-snap-carousel + +# 0.77 +npm install @react-native-ohos/react-native-snap-carousel ``` + #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-snap-carousel +# 0.72 +npm add @react-native-oh-tpl/react-native-snap-carousel + +# 0.77 +yarn add @react-native-ohos/react-native-snap-carousel ``` + The following code shows the basic use scenario of the repository: @@ -119,9 +134,10 @@ const styles = StyleSheet.create({ ### Compatibility -To use this repository, you need to use the correct React-Native and RNOH versions. In addition, you need to use DevEco Studio and the ROM on your phone. +This document is verified based on the following versions: -Check the release version information in the release address of the third-party library: [@react-native-oh-library/react-native-snap-carousel Releases](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## Properties diff --git a/zh-cn/react-native-recaptcha-that-works.md b/zh-cn/react-native-recaptcha-that-works.md index 4b1117b6cf686dbf10823f6480a55a0e4bc87312..b7a998eb775766232bc2968dddadb03b7728962f 100644 --- a/zh-cn/react-native-recaptcha-that-works.md +++ b/zh-cn/react-native-recaptcha-that-works.md @@ -15,6 +15,12 @@ > [!TIP] [Github 地址](https://github.com/douglasjunior/react-native-recaptcha-that-works) +| 三方库版本 | 支持RN版本 | +|-------|---------- | +| 2.0.0 | 0.72/0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 + ## 安装与使用 进入到工程目录并输入以下命令: @@ -129,6 +135,7 @@ const App = () => { 1. RNOH: 0.72.28; OH SDK: HarmonyOS-Next-DB2 5.0.0.31 (API Version 12 Beta2); IDE: DevEco Studio: 5.0.3.500; ROM: 3.0.0.31; 2. RNOH:0.72.33; SDK:OpenHarmony 5.0.0.71(API Version 12 Release); IDE:DevEco Studio 5.0.3.900; ROM:NEXT.0.0.71; +3. RNOH: 0.77.18; SDK:HarmonyOS 6.0.0.47 (API Version 20); IDE:DevEco Studio 6.0.0.858; ROM:6.0.0.107; ## 属性 @@ -138,25 +145,25 @@ const App = () => { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------- | -------- | ----------- | ----------------- | -| headerComponent | A component to render on top of Modal. | `React Element` | no | iOS,Android | yes | -| footerComponent | A component to render on bottom of Modal. | `React Element` | no | iOS,Android | yes | -| loadingComponent | A custom loading component. | `React Element` | no | iOS,Android | yes | -| style | Customize default style such as background color. | [`ViewStyle`](https://reactnative.dev/docs/view-style-props) | no | iOS,Android | yes | -| modalProps | Override the Modal props. | [ModalProps](https://reactnative.dev/docs/modal) | no | iOS,Android | yes | -| webViewProps | Override the WebView props. | [WebViewProps](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) | no | iOS,Android | yes | -| lang | [Language code](https://developers.google.com/recaptcha/docs/language). | `string` | no | iOS,Android | yes | -| siteKey | (Required) Your Web reCAPTCHA site key. (The Web key must be used, not for Android) | `string` | yes | iOS,Android | yes | -| baseUrl | (Required) The URL (domain) configured in the reCAPTCHA console setup. (ex. http://my.domain.com) (See also https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/34) | `string` | yes | iOS,Android | yes | -| size | The size of the widget. | `'invisible'`, `'normal'` or `'compact'` | no | iOS,Android | yes | -| theme | The color theme of the widget. | `'dark'` or `'light'` | no | iOS,Android | yes | -| onLoad | A callback function, executed when the reCAPTCHA is ready to use. | `function()` | no | iOS,Android | yes | -| onVerify | (Required) A callback function, executed when the user submits a successful response. The reCAPTCHA response token is passed to your callback. | `function(token)` | yes | iOS,Android | yes | -| onExpire | A callback function, executed when the reCAPTCHA response expires and the user needs to re-verify. Only works if the `webview` still open after `onVerify` has been called for a long time. | `function()` | no | iOS,Android | yes | -| onError | A callback function, executed when reCAPTCHA encounters an error (usually network connectivity) and cannot continue until connectivity is restored. If you specify a function here, you are responsible for informing the user that they should retry. | `function(error)` | no | iOS,Android | yes | -| onClose | A callback function, executed when the Modal is closed. | `function()` | no | iOS,Android | yes | -| recaptchaDomain | The host name of the reCAPTCHA valid api. [See detail](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally). | `string` | no | iOS,Android | yes | -| hideBadge | When `size = 'invisible'`, you are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. [See detail](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed). | `boolean` | no | iOS,Android | yes | -| enterprise | Use the new [reCAPTCHA Enterprise API](https://cloud.google.com/recaptcha-enterprise/docs/using-features). Note: for enterprise you need to choose the `size` [when creating the `siteKey`](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/55#issuecomment-2107089307). | `boolean` (enterprise) | no | iOS,Android | yes | +| headerComponent | 在模态框顶部渲染的组件 | `React Element` | no | iOS,Android | yes | +| footerComponent | 在模态框底部渲染的组件 | `React Element` | no | iOS,Android | yes | +| loadingComponent | 自定义加载组件 | `React Element` | no | iOS,Android | yes | +| style | 自定义默认样式,如背景色 | [`ViewStyle`](https://reactnative.dev/docs/view-style-props) | no | iOS,Android | yes | +| modalProps | 覆盖模态框属性 | [ModalProps](https://reactnative.dev/docs/modal) | no | iOS,Android | yes | +| webViewProps | 覆盖WebView属性 | [WebViewProps](https://github.com/react-native-webview/react-native-webview/blob/master/docs/Reference.md) | no | iOS,Android | yes | +| lang | [语言代码](https://developers.google.com/recaptcha/docs/language). | `string` | no | iOS,Android | yes | +| siteKey | (必需) 您的Web reCAPTCHA站点密钥。(必须使用Web密钥,而不是Android密钥) | `string` | yes | iOS,Android | yes | +| baseUrl | (必需) 在reCAPTCHA控制台设置中配置的URL(域名)。(例如http://my.domain.com) (另请参见https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/34) | `string` | yes | iOS,Android | yes | +| size | 小部件的大小 | `'invisible'`, `'normal'` or `'compact'` | no | iOS,Android | yes | +| theme | 小部件的颜色主题 | `'dark'` or `'light'` | no | iOS,Android | yes | +| onLoad | 回调函数,在reCAPTCHA准备使用时执行 | `function()` | no | iOS,Android | yes | +| onVerify | (必需) 回调函数,在用户提交成功响应时执行。reCAPTCHA响应令牌将传递给您的回调函数 | `function(token)` | yes | iOS,Android | yes | +| onExpire | 回调函数,在reCAPTCHA响应过期且用户需要重新验证时执行。仅在onVerify调用后长时间保持webview打开时有效 | `function()` | no | iOS,Android | yes | +| onError | 回调函数,在reCAPTCHA遇到错误(通常是网络连接)且无法继续直到连接恢复时执行。如果您在此处指定函数,您需要负责通知用户应该重试 | `function(error)` | no | iOS,Android | yes | +| onClose | 回调函数,在模态框关闭时执行 | `function()` | no | iOS,Android | yes | +| recaptchaDomain | reCAPTCHA有效API的主机名。[查看详情](https://developers.google.com/recaptcha/docs/faq#can-i-use-recaptcha-globally). | `string` | no | iOS,Android | yes | +| hideBadge | 当size = 'invisible'时,只要您在用户流程中明显包含reCAPTCHA品牌,就可以隐藏徽章。[查看详情](https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed). | `boolean` | no | iOS,Android | yes | +| enterprise | 使用新的[reCAPTCHA企业版API](https://cloud.google.com/recaptcha-enterprise/docs/using-features)。注意:对于企业版,您需要在创建siteKey时选择size。[查看详情](https://github.com/douglasjunior/react-native-recaptcha-that-works/issues/55#issuecomment-2107089307). | `boolean` (enterprise) | no | iOS,Android | yes | ## 静态方法 @@ -166,8 +173,8 @@ const App = () => { | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----- | -------------------------- | ---------- | -------- | ----------- | ----------------- | -| open | Open the reCAPTCHA Modal. | `function` | no | iOS,Android | yes | -| close | Close the reCAPTCHA Modal. | `function` | no | iOS,Android | yes | +| open | 打开 reCAPTCHA 模态框 | `function` | no | iOS,Android | yes | +| close | 关闭 reCAPTCHA 模态框 | `function` | no | iOS,Android | yes | ## 遗留问题 diff --git a/zh-cn/react-native-snap-carousel.md b/zh-cn/react-native-snap-carousel.md index 644cdc665d0580ed90dd203fed601cd7dbef755a..52ce8d5024d56ee8d88a60bfd040fca8a3d55e6e 100644 --- a/zh-cn/react-native-snap-carousel.md +++ b/zh-cn/react-native-snap-carousel.md @@ -14,9 +14,16 @@ > [!TIP] [Github 地址](https://github.com/react-native-oh-library/react-native-snap-carousel) -## 安装与使用 +请到三方库的 Releases 发布地址查看配套的版本信息: + +| 三方库版本 | 发布信息 | 支持RN版本 | +|-------| ------------------------------------------------------------ | ---------- | +| 3.9.1 | [@react-native-oh-tpl/react-native-snap-carousel Releases](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) | 0.72 | +| 3.10.0 | [@react-native-ohos/react-native-snap-carousel Releases]() | 0.77 | + +对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 -请到三方库的 Releases 发布地址查看配套的版本信息:[@react-native-oh-library/react-native-snap-carousel Releases](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) 。对于未发布到npm的旧版本,请参考[安装指南](/zh-cn/tgz-usage.md)安装tgz包。 +## 安装与使用 进入到工程目录并输入以下命令: @@ -25,13 +32,23 @@ #### **npm** ```bash +# 0.72 npm install @react-native-oh-tpl/react-native-snap-carousel + +# 0.77 +npm install @react-native-ohos/react-native-snap-carousel ``` + #### **yarn** ```bash -yarn add @react-native-oh-tpl/react-native-snap-carousel +# 0.72 +npm add @react-native-oh-tpl/react-native-snap-carousel + +# 0.77 +yarn add @react-native-ohos/react-native-snap-carousel ``` + 下面的代码展示了这个库的基本使用场景: @@ -117,9 +134,10 @@ const styles = StyleSheet.create({ ### 兼容性 -要使用此库,需要使用正确的 React-Native 和 RNOH 版本。另外,还需要使用配套的 DevEco Studio 和 手机 ROM。 +本文档内容基于以下版本验证通过: -请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息:[@react-native-oh-library/react-native-snap-carousel Releases](https://github.com/react-native-oh-library/react-native-snap-carousel/releases) +1. RNOH: 0.72.20; SDK: HarmonyOS NEXT Developer Beta1; IDE: DevEco Studio 5.0.3.200; ROM: 3.0.0.18; +2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112; ## 属性 @@ -129,44 +147,44 @@ const styles = StyleSheet.create({ | Name | Description | Type | Required | Platform | HarmonyOS Support | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------- | ----------------------------------------------------- | -------- | ----------------- | -| `data` | Array of items to loop on | Array | yes | iOS/Android | yes | -| `renderItem` | Takes an item from data and renders it into the list. The function receives one argument `{item, index}` (see [Usage](https://github.com/meliorence/react-native-snap-carousel#usage)) and must return a React element. | Function | yes | iOS/Android | yes | -| `itemWidth` | Width in pixels of carousel's items, **must be the same for all of them** | Number | yes | iOS/Android | yes | -| `sliderWidth` | Width in pixels of the carousel itself | Number | yes | iOS/Android | yes | -| `itemHeight` | Height in pixels of carousel's items, **must be the same for all of them** | Number | yes | iOS/Android | yes | -| `sliderHeight` | Height in pixels of the carousel itself | Number | yes | iOS/Android | yes | -| `loop` | Enable infinite loop mode. **:warning: It won't work if `enableSnap` has been set to `false`.** | Boolean | no | iOS/Android | yes | -| `loopClonesPerSide` | Number of clones to append to each side of the original items. **When swiping very quickly**, the user will eventually need to pause for a quick second before the scroll is repositioned (this occurs when the end of the set is reached). By increasing this number, the user will be able to scroll more slides before having to stop; but you'll also load more items in memory. This is a trade-off between optimal user experience and performance. | Number | no | iOS/Android | yes | -| `autoplay` | Trigger autoplay on mount. If you enable autoplay, we recommend you to set `enableMomentum` to `false` (default) and `lockScrollWhileSnapping` to `true`; this will enhance user experience a bit. | Boolean | no | iOS/Android | yes | -| `autoplayDelay` | Delay before enabling autoplay on startup & after releasing the touch | Number | no | iOS/Android | yes | -| `autoplayInterval` | Delay in ms until navigating to the next item | Number | no | iOS/Android | yes | -| `layout` | Define the way items are rendered and animated. Possible values are `'default'`, `'stack'` and `'tinder'`. :warning: **Setting this prop to either `'stack'` or `'tinder'` will activate `useScrollView` [to prevent rendering bugs with `FlatList`](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#caveats). Therefore, those layouts won't be suited if you have a large data set since all items are going to be rendered upfront.** | String | no | iOS/Android | yes | -| `containerCustomStyle` | Optional styles for Scrollview's global wrapper | View Style Object | no | iOS/Android | yes | -| `contentContainerCustomStyle` | Optional styles for Scrollview's items container | View Style Object | no | iOS/Android | yes | -| `inactiveSlideOpacity` | Value of the opacity effect applied to inactive slides | Number | no | iOS/Android | yes | -| `inactiveSlideScale` | Value of the 'scale' transform applied to inactive slides | Number | no | iOS/Android | yes | -| `inactiveSlideShift` | Value of the 'translate' transform applied to inactive slides (see #204 or the "custom interpolations" doc for an example usage). This prop will have no effect with layouts others than the default one. on | Number | no | iOS/Android | yes | -| `layoutCardOffset` | Use to increase or decrease the default card offset in both 'stack' and 'tinder' layouts. | Number | no | iOS/Android | yes | -| `slideStyle` | Optional style for each item's container (the one whose scale and opacity are animated) | Animated View Style Object | no | iOS/Android | yes | -| `scrollInterpolator` | Used to define custom interpolations. See [the dedicated doc](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#summary). | Function | no | iOS/Android | yes | -| `slideInterpolatedStyle` | Used to define custom interpolations. See [the dedicated doc](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#summary). | Function | no | iOS/Android | yes | -| `activeAnimationOptions` | Custom animation options. Note that `useNativeDriver` will be enabled by default and that opacity's easing will always be kept linear. **Setting this prop to something other than `null` will trigger custom animations and will completely change the way items are animated:** rather than having their opacity and scale interpolated based the scroll value (default behavior), they will now play the custom animation you provide as soon as they become active. **This means you cannot use props `layout`, `scrollInterpolator` or `slideInterpolatedStyle` in conjunction with `activeAnimationOptions`.** | Object | no | iOS/Android | yes | -| `activeAnimationType` | Custom [animation type:](https://reactnative.dev/docs/animated.html#configuring-animations) either `'decay'`, `'spring'` or `'timing'`. Note that it will only be applied to the scale animation since opacity's animation type will always be set to `timing` (no one wants the opacity to 'bounce' around). `````````````` | String | no | iOS/Android | yes | -| `activeSlideAlignment` | Determine active slide's alignment relative to the carousel. Possible values are: `'start'`, `'center'` and `'end'`. **It is not recommended to use this prop in conjunction with the `layout` one.** | String | no | iOS/Android | yes | -| `activeSlideOffset` | From slider's center, minimum slide distance to be scrolled before being set to active. | Number | no | iOS/Android | yes | -| `apparitionDelay` | `FlatList`'s init is a real mess, with lots of unneeded flickers and slides movement. This prop controls the delay during which the carousel will be hidden when mounted. **WARNING: on Android, using it may lead to [rendering issues](https://github.com/meliorence/react-native-snap-carousel/issues/236) (i.e. images not showing up).** Make sure to test thoroughly if you decide on using it. | Number | no | iOS/Android | yes | -| `callbackOffsetMargin` | Scroll events might not be triggered often enough to get a precise measure and, therefore, to provide a reliable callback. This usually is an Android issue, which might be linked to the version of React Native you're using (see ["Unreliable callbacks"](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-callbacks)). To work around this, you can define a small margin that will increase the "sweet spot"'s width. The default value should cover most cases, but **you will want to increase it if you experience missed callbacks.** | Number | no | iOS/Android | yes | -| `enableMomentum` | See [momentum](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#momentum) | Boolean | no | iOS/Android | yes | -| `enableSnap` | If enabled, releasing the touch will scroll to the center of the nearest/active item | Boolean | no | iOS/Android | yes | -| `firstItem` | Index of the first item to display. ⚠️ **Make sure to use inherited props `[getItemLayout](https://reactnative.dev/docs/flatlist#getitemlayout)` & `[initialScrollIndex](https://reactnative.dev/docs/flatlist#initialscrollindex)` if the prop doesn't seem to work.** | Number | no | iOS/Android | yes | -| `hasParallaxImages` | Whether the carousel contains components or not. Required for specific data to be passed to children. | Boolean | no | iOS/Android | yes | -| `lockScrollTimeoutDuration` | This prop works in conjunction with `lockScrollWhileSnapping`. When scroll is locked, a timer is created in order to release the scroll if something goes wrong with the regular callback handling. **Normally, you shouldn't have to use this prop.** | Number | no | iOS/Android | yes | -| `lockScrollWhileSnapping` | Prevent the user from swiping again while the carousel is snapping to a position. This prevents miscellaneous minor issues (inadvertently tapping an item while scrolling, stopping the scrolling animation if the carousel is tapped in the middle of a snap, clunky behavior on Android when short snapping quickly in opposite directions). The only drawback is that enabling the prop hinders the ability to swipe quickly between items as a little pause between swipes is needed. **Note that the prop won't have any effect if `enableMomentum` is set to `true`, since it would otherwise impede the natural and expected behavior.** | Boolean | no | iOS/Android | yes | -| `scrollEnabled` | When `false`, the view cannot be scrolled via touch interaction ([inherited prop](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#inherited-props)) | Boolean | no | iOS/Android | yes | -| `shouldOptimizeUpdates` | Whether to implement a `shouldComponentUpdate` strategy to minimize updates | Boolean | no | iOS/Android | yes | -| `swipeThreshold` | Delta x when swiping to trigger the snap | Number | no | iOS/Android | yes | -| `useScrollView` | Whether to use a `ScrollView` component instead of the default `FlatList` one. The advantages are to avoid rendering issues that can arise with `FlatList` and to provide compatibility with React Native pre- `0.43`. The major drawbacks are that you won't benefit from any of `FlatList`'s advanced optimizations and that you won't be able to use either VirtualizedList or FlatList's specific props. **We recommend activating it only with a small set of slides and to test performance thoroughly in production mode**. Since version `3.7.6`, this prop also accepts a custom scroll component (see #498 for more info). | Boolean | no | iOS/Android | yes | -| `vertical` | Layout slides vertically instead of horizontally | Boolean | no | iOS/Android | yes | +| `data` | 要循环播放的项目数组 | Array | yes | iOS/Android | yes | +| `renderItem` | 从数据中获取一个项目并将其渲染到列表中。该函数接收一个参数 `{item, index}` (参见[用法](https://github.com/meliorence/react-native-snap-carousel#usage))并且必须返回一个 React 元素 | Function | yes | iOS/Android | yes | +| `itemWidth` | 轮播图项目的宽度(以像素为单位),**所有项目必须相同** | Number | yes | iOS/Android | yes | +| `sliderWidth` | 轮播图本身的宽度(以像素为单位) | Number | yes | iOS/Android | yes | +| `itemHeight` | 轮播图项目的高度(以像素为单位), **所有项目必须相同** | Number | yes | iOS/Android | yes | +| `sliderHeight` | 轮播图本身的高度(以像素为单位) | Number | yes | iOS/Android | yes | +| `loop` | E启用无限循环模式。**:w:warning: 如果 enableSnap 设置为 false,则此功能将不起作用。** | Boolean | no | iOS/Android | yes | +| `loopClonesPerSide` | 在原始项目每侧附加的克隆数量。**当快速滑动时**,用户最终需要暂停片刻,然后才能重新定位滚动(当到达项目集末尾时会发生这种情况)。通过增加此数值,用户将能够在停止之前滚动更多幻灯片;但您也会在内存中加载更多项目。这是在最佳用户体验和性能之间的权衡 | Number | no | iOS/Android | yes | +| `autoplay` | 在挂载时触发自动播放。如果您启用自动播放,我们建议您将 enableMomentum 设置为 false(默认值)并将 lockScrollWhileSnapping 设置为 true;这将稍微提升用户体验 | Boolean | no | iOS/Android | yes | +| `autoplayDelay` | 启动自动播放前和释放触摸后的延迟时间 | Number | no | iOS/Android | yes | +| `autoplayInterval` | 导航到下一个项目之前的延迟时间(毫秒 | Number | no | iOS/Android | yes | +| `layout` | 定义项目的渲染和动画方式。可能的值为 'default'、'stack' 和 'tinder'。:warning: **将此属性设置为 'stack' 或 'tinder' 将激活 useScrollView [以防止 FlatList 出现渲染错误](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#caveats)。因此,如果您有大型数据集,这些布局将不适用,因为所有项目都将提前渲染。** | String | no | iOS/Android | yes | +| `containerCustomStyle` | ScrollView 全局包装器的可选样式 | View Style Object | no | iOS/Android | yes | +| `contentContainerCustomStyle` | ScrollView 项目容器的可选样式 | View Style Object | no | iOS/Android | yes | +| `inactiveSlideOpacity` | 应用于非活动幻灯片的透明度效果值 | Number | no | iOS/Android | yes | +| `inactiveSlideScale` | 应用于非活动幻灯片的"缩放"变换值 | Number | no | iOS/Android | yes | +| `inactiveSlideShift` | 应用于非活动幻灯片的"平移"变换值(参见 #204 或"自定义插值"文档获取使用示例)。此属性在默认布局以外的布局中将不起作用on | Number | no | iOS/Android | yes | +| `layoutCardOffset` | 用于增加或减少"堆叠"和"探戈"布局中的默认卡片偏移量 | Number | no | iOS/Android | yes | +| `slideStyle` | 每个项目容器的可选样式(即缩放和透明度被动画化的那个容器) | Animated View Style Object | no | iOS/Android | yes | +| `scrollInterpolator` | 用于定义自定义插值。请参阅[专门文档](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#summary) | Function | no | iOS/Android | yes | +| `slideInterpolatedStyle` | 用于定义自定义插值。请参阅[专门文档](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/CUSTOM_INTERPOLATIONS.md#summary) | Function | no | iOS/Android | yes | +| `activeAnimationOptions` | 自定义动画选项。请注意,默认情况下将启用 useNativeDriver,并且透明度的缓动将始终保持线性。**将此属性设置为 null 以外的值将触发自定义动画,并完全改变项目的动画方式:** 与其基于滚动值插值透明度和缩放(默认行为),不如在项目变为活动状态时立即播放您提供的自定义动画。 **T这意味着您不能将 layout、scrollInterpolator 或 slideInterpolatedStyle 属性与 activeAnimationOptions 一起使用。** | Object | no | iOS/Android | yes | +| `activeAnimationType` | 自定义 [动画类型:](https://reactnative.dev/docs/animated.html#configuring-animations)'decay'、'spring' 或 'timing'。请注意,这只会应用于缩放动画,因为透明度的动画类型将始终设置为 timing(没有人希望透明度"弹跳") `````````````` | String | no | iOS/Android | yes | +| `activeSlideAlignment` | 确定活动幻灯片相对于轮播图的对齐方式。可能的值为:'start'、'center' 和 'end'。 **不建议将此属性与 layout 属性一起使用。** | String | no | iOS/Android | yes | +| `activeSlideOffset` | 从滑块中心开始,滚动到活动状态之前的最小幻灯片距离 | Number | no | iOS/Android | yes | +| `apparitionDelay` | FlatList 的初始化非常混乱,会出现许多不必要的闪烁和幻灯片移动。此属性控制在挂载时隐藏轮播图的延迟时间。 **警告:在 Android 上使用它可能导致[渲染问题](https://github.com/meliorence/react-native-snap-carousel/issues/236) (即图像不显示)。** 如果您决定使用它,请务必彻底测试 | Number | no | iOS/Android | yes | +| `callbackOffsetMargin` | 滚动事件可能触发得不够频繁,无法获得精确的测量值,因此无法提供可靠的回调。这通常是Android问题,可能与您使用的React Native版本有关 (参见[“不可靠的回调”](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/KNOWN_ISSUES.md#unreliable-callbacks))。为了解决这个问题,您可以定义一个小的边距来增加"最佳位置"的宽度。默认值应该能覆盖大多数情况, **但是如果您遇到回调丢失的情况,您可能需要增加这个值。** | Number | no | iOS/Android | yes | +| `enableMomentum` | 参见 [momentum](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/TIPS_AND_TRICKS.md#momentum) | Boolean | no | iOS/Android | yes | +| `enableSnap` | 如果启用,释放触摸后将滚动到最近/活动项的中心 | Boolean | no | iOS/Android | yes | +| `firstItem` | 要显示的第一个项目的索引。⚠️ **如果该属性似乎不起作用,请确保使用继承的属性`[getItemLayout](https://reactnative.dev/docs/flatlist#getitemlayout)` 和 `[initialScrollIndex](https://reactnative.dev/docs/flatlist#initialscrollindex)`。** | Number | no | iOS/Android | yes | +| `hasParallaxImages` | 轮播图是否包含 组件。需要传递特定数据给子组件时使用。 | Boolean | no | iOS/Android | yes | +| `lockScrollTimeoutDuration` | 此属性与 lockScrollWhileSnapping 配合使用。当滚动被锁定时,会创建一个计时器,以便在常规回调处理出现问题时释放滚动。**通常情况下,您不需要使用此属性。** | Number | no | iOS/Android | yes | +| `lockScrollWhileSnapping` | 在轮播图切换到某个位置时,防止用户再次滑动。这样可以防止一些次要问题(如滚动时意外点击项目、在切换过程中点击轮播图导致滚动动画停止、在Android上快速反向短距离滑动时的卡顿行为)。唯一的缺点是启用此属性会妨碍用户在项目之间快速滑动,因为滑动之间需要短暂的停顿。 **请注意,如果 enableMomentum 设置为 true,此属性将不会产生任何效果,因为它会阻碍自然和预期的行为。** | Boolean | no | iOS/Android | yes | +| `scrollEnabled` | 当设置为 false 时,视图无法通过触摸交互进行滚动([继承属性](https://github.com/meliorence/react-native-snap-carousel/blob/master/doc/PROPS_METHODS_AND_GETTERS.md#inherited-props)) | Boolean | no | iOS/Android | yes | +| `shouldOptimizeUpdates` | 是否实现 shouldComponentUpdate 策略以最小化更新 | Boolean | no | iOS/Android | yes | +| `swipeThreshold` | 触发快照的滑动 deltaX 值 | Number | no | iOS/Android | yes | +| `useScrollView` | 是否使用 ScrollView 组件而不是默认的 FlatList 组件。优点是可以避免 FlatList 可能引起的渲染问题,并提供与 React Native 0.43 之前版本的兼容性。主要缺点是您将无法从 FlatList 的高级优化中获益,也无法使用 VirtualizedList 或 FlatList 的特定属性。 **W我们建议仅在幻灯片数量较少的情况下启用此选项,并在生产模式下彻底测试性能**. 从 3.7.6 版本开始,此属性还接受自定义滚动组件(see #498 for more info). | Boolean | no | iOS/Android | yes | +| `vertical` | 垂直布局幻灯片而不是水平布局 | Boolean | no | iOS/Android | yes | ## 静态方法 @@ -177,10 +195,10 @@ const styles = StyleSheet.create({ | Prop | Description | Type | Required | Platform | HarmonyOS Support | | -------------------------------- | ---------------------------------------------------------------------------------- | -------- | ----------- | ------- | ----------------- | -| `onLayout(event)` | Exposed `View` callback; invoked on mount and layout changes | Function | `no` | All | yes | -| `onScroll(event)` | Exposed `ScrollView` callback; fired while scrolling | Function | `no` | All | yes | -| `onBeforeSnapToItem(slideIndex)` | Callback fired when the new active item has been determined, before snapping to it | Function | `no` | All | yes | -| `onSnapToItem(slideIndex)` | Callback fired after snapping to an item | Function | `no` | All | yes | +| `onLayout(event)` | 暴露的 View 回调函数;在组件挂载和布局变化时调用 | Function | `no` | All | yes | +| `onScroll(event)` | 暴露的 ScrollView 回调函数;在滚动过程中触发 | Function | `no` | All | yes | +| `onBeforeSnapToItem(slideIndex)` | 在确定新激活项之后、跳转之前触发的回调函数 | Function | `no` | All | yes | +| `onSnapToItem(slideIndex)` | 在跳转到某个项之后触发的回调函数 | Function | `no` | All | yes | ## 遗留问题 - [ ] enableMomentum属性在ios设备上效果不明显,Harmony上效果使用正常: [issue#1](https://github.com/react-native-oh-library/react-native-snap-carousel/issues/4)