dingchengjiedocs:修改react-native-swiper的中英文文档失效链接

模板版本：v0.4.0

`react-native-swiper`

该库支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-swiper，版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-swiper	~1.6.1	Github Releases	`0.72./0.77./0.82.*`	否	API12+	1.6.0	Npm Address
@react-native-oh-tpl/react-native-swiper	1.6.1 @deprecated	Github Releases(deprecated)	0.72.*	否	API12+	1.6.0	Npm Address

1. 安装与使用

进入到工程目录并输入以下命令：

npm

npm install @react-native-ohos/react-native-swiper

yarn

yarn add @react-native-ohos/react-native-swiper

下面的代码展示了这个库的基本使用场景：

使用时 import 的库名不变。

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 (
      <Swiper style={styles.wrapper} showsButtons={true}>
        <View style={styles.slide1}>
          <Text style={styles.text}>Hello Swiper</Text>
        </View>
        <View style={styles.slide2}>
          <Text style={styles.text}>Beautiful</Text>
        </View>
        <View style={styles.slide3}>
          <Text style={styles.text}>And simple</Text>
        </View>
      </Swiper>
    );
  }
}

AppRegistry.registerComponent("myproject", () => SwiperComponent);

2. 约束与限制

2.1. 兼容性

本文档内容基于以下版本验证通过：

RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.58;
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;
RNOH：0.77.18; SDK：OpenHarmony 6.0.0.47(API Version 20 Release); IDE：DevEco Studio 6.0.0.47 Release; ROM：5.1.1.45（SP1C00E45R4P4）;
RNOH: 0.82.7; SDK: HarmonyOS 6.0.1 Release SDK; IDE: DevEco Studio 6.0.1 Release; ROM:6.0.0.328 SP26;

3. 属性

"Platform"列表示该属性在原三方库上支持的平台。

"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。

basics

Name	Description	Type	Default	platform	HarmonyOS Support
horizontal	如果为 `true`，滚动视图的子元素将水平排列在一行中，而不是垂直排列在一列中。	`bool`	true	All	YES
loop	设置为 `false` 可禁用连续循环模式。	`bool`	true	All	YES
index	初始滑块的索引号。	`number`	0	All	YES
showsButtons	设置为 `true` 可使控制按钮可见。	`bool`	false	All	YES
autoplay	设置为 `true` 启用自动播放模式。	`bool`	false	All	YES
onIndexChanged	当用户滑动时，使用新索引调用	`func`	(index) => null	All	YES

Custom basic style & content

Name	Description	Type	Default	platform	HarmonyOS Support
width	如果未指定，默认通过 `flex: 1` 启用全屏模式。	`number`	-	All	YES
height	如果未指定，默认通过 `flex: 1` 启用全屏模式。	`number`	-	All	YES
style	参见源码中的默认样式。	`style`	{...}	All	YES
containerStyle	参见源码中的默认容器样式。	`style`	{...}	All	YES
loadMinimal	仅加载当前索引的幻灯片以及前后 `loadMinimalSize` 张幻灯片。	`bool`	false	All	YES
loadMinimalSize	参见 `loadMinimal`	`number`	1	All	YES
loadMinimalLoader	幻灯片未加载时显示的自定义加载器	`element`	`<ActivityIndicator />`	All	YES

Pagination

Name	Description	Type	Default	platform	HarmonyOS Support
showsPagination	设置为 `true` 可使分页器可见。	`bool`	true	All	YES
paginationStyle	自定义样式将与默认样式合并。	`style`	{...}	All	YES
renderPagination	完全控制如何渲染分页器，包含三个参数（`index`、`total`、`context`），分别引用 `this.state.index` / `this.state.total` / `this`，例如：显示数字而不是圆点。	`function`	-	All	YES
dot	允许自定义圆点元素。	`element`	`<View style={{backgroundColor:'rgba(0,0,0,.2)', width: 8, height: 8,borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />`	All	YES
activeDot	允许自定义激活状态的圆点元素。	`element`	`<View style={{backgroundColor: '#007aff', width: 8, height: 8, borderRadius: 4, marginLeft: 3, marginRight: 3, marginTop: 3, marginBottom: 3,}} />`	All	YES
dotStyle	允许自定义圆点元素。	`object`	-	All	YES
dotColor	允许自定义圆点元素。	`string`	-	All	YES
activeDotColor	允许自定义激活状态的圆点元素。	`string`	-	All	YES
activeDotStyle	允许自定义激活状态的圆点元素。	`object`	-	All	YES

Autoplay

Name	Description	Type	Default	platform	HarmonyOS Support
autoplay	设置为 `true` 启用自动播放模式。	`bool`	true	All	YES
autoplayTimeout	自动播放切换之间的延迟（秒）。	`number`	2.5	All	YES
autoplayDirection	循环方向控制。	`bool`	true	All	YES

Control buttons

Prop	Default	Type	Description	platform	HarmonyOS Support	remark
showsButtons	true	`bool`	设置为 `true` 可使控制按钮可见。	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`	自定义样式。	All	YES	--
nextButton	`<Text style={styles.buttonText}>›</Text>`	`element`	允许自定义下一个按钮。	All	YES	--
prevButton	`<Text style={styles.buttonText}>‹</Text>`	`element`	允许自定义上一个按钮。	All	YES	--

Props of Children

Name	Description	Type	Default	platform	HarmonyOS Support
style	自定义样式将与默认样式合并。	`style`	{...}	All	YES
title	如果未指定此参数，将不会渲染标题。	`element`	{...}	All	YES

Basic props of `<ScrollView />`

Name	Description	Type	Default	platform	HarmonyOS Support	remark
horizontal	如果为 `true`，滚动视图的子元素将水平排列在一行中，而不是垂直排列在一列中。	`bool`	true	All	YES	--
pagingEnabled	如果为 true，滚动时滚动视图会在其大小的倍数处停止。可用于水平分页。	`bool`	true	All	YES	--
showsHorizontalScrollIndicator	如果要显示水平滚动条，请设置为 `true`。	`bool`	false	All	YES	--
showsVerticalScrollIndicator	如果要显示垂直滚动条，请设置为 `true`。	`bool`	false	All	YES	--
bounces	如果为 `true`，当内容在滚动方向轴上大于滚动视图时，滚动视图在到达内容末尾时会弹跳。如果为 `false`，即使 alwaysBounce* 属性为 true，也会禁用所有弹跳。	`bool`	false	All	YES	--
scrollsToTop	如果为 true，点击状态栏时滚动视图会滚动到顶部。	`bool`	false	All	NO	组件属性继承RNOH scrollview,当前RNOH中的scrollsToTop暂时不支持
removeClippedSubviews	如果为 true，屏幕外的子视图（overflow 值为 hidden）在离开屏幕时会从其原生父视图中移除。这可以提高长列表的滚动性能。	`bool`	true	All	NO	组件属性继承RNOH scrollview,当前RNOH中的removeClippedSubviews暂时不支持
automaticallyAdjustContentInsets	如果需要自动调整内容边距，请设置为 `true`。	`bool`	false	All	NO	组件属性继承RNOH scrollview,当前RNOH中的automaticallyAdjustContentInsets暂时不支持
scrollEnabled	启用/禁用滑动	`bool`	true	All	YES	--

@see: https://reactnative.dev/docs/scrollview

Supported ScrollResponder

Name	Description	Type	Params	platform	HarmonyOS Support
onScrollBeginDrag	松手后动画开始	`function`	`e` / `state` / `context`	All	YES
onMomentumScrollEnd	不知道为什么在弹跳期间会首先触发	`function`	`e` / `state` / `context`	All	YES
onTouchStartCapture	紧接着 `onMomentumScrollEnd`	`function`	`e` / `state` / `context`	All	YES
onTouchStart	触摸开始时触发	`function`	`e` / `state` / `context`	All	YES
onTouchEnd	触摸结束时触发	`function`	`e` / `state` / `context`	All	YES
onResponderRelease	释放事件 - 可在释放前多次执行操作	`function`	`e` / `state` / `context`	All	YES

注意：每个ScrollResponder都注入了两个参数：state和context，你可以从params中获取state和context（引用swiper的this），例如：

var swiper = React.createClass({
  _onMomentumScrollEnd: function (e, state, context) {
    console.log(state, context.state)
  },
  render: function() {
    return (
      <Swiper style={styles.wrapper}
      onMomentumScrollEnd ={this._onMomentumScrollEnd}
     ...
      </Swiper>
    )
  }
})

4. 静态方法

scrollBy(index, animated)

Name	Description	Type	default	platform	HarmonyOS Support
index	偏移索引	`number`	`undefined`	All	YES
animated	偏移索引	`bool`	`true`	All	YES

scrollTo(index, animated)

Name	Description	Type	default	platform	HarmonyOS Support
index	偏移索引	`number`	`undefined`	All	YES
animated	偏移索引	`bool`	`true`	All	YES

5. 遗留问题

组件属性继承RNOH scrollview,当前RNOH中的scrollsToTop暂时不支持
组件属性继承RNOH scrollview,当前RNOH中的removeClippedSubviews暂时不支持
组件属性继承RNOH scrollview,当前RNOH中的automaticallyAdjustContentInsets暂时不支持
组件轮播图RNOH版本为0.72.13暂时有不居中问题，在RNOH版本为0.72.19上解决

6. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。

react-native-swiper