From 7850e97b860b152fc5b96dc0258e59e6259ab93f Mon Sep 17 00:00:00 2001 From: huangzongzheng <1518931313@qq.com> Date: Thu, 12 Sep 2024 16:47:57 +0800 Subject: [PATCH] =?UTF-8?q?docs:=20[Issue:=20#IAQW8R]=E4=BF=AE=E6=94=B9rea?= =?UTF-8?q?ct-native-swiper=E6=8C=87=E5=AF=BC=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- zh-cn/react-native-swiper.md | 491 ++++++++++++++++++++++------------- 1 file changed, 314 insertions(+), 177 deletions(-) diff --git a/zh-cn/react-native-swiper.md b/zh-cn/react-native-swiper.md index 243cc561..8c24f40b 100644 --- a/zh-cn/react-native-swiper.md +++ b/zh-cn/react-native-swiper.md @@ -1,235 +1,372 @@ - > 模板版本：v0.2.2

-

react-native-swiper

+

react-native-ezswiper

- - Supported platforms + + Supported platforms - + License

- -> [!tip] [Github 地址](https://github.com/leecade/react-native-swiper) +> [!Tip] [Github 地址](https://github.com/easyui/react-native-ezswiper) ## 安装与使用 +进入到工程目录并输入以下命令： + #### **npm** ```bash -npm i react-native-swiper@1.6.0 --save +npm install react-native-ezswiper@1.3.0 --save ``` #### **yarn** ```bash -yarn add react-native-swiper@1.6.0 +yarn add react-native-ezswiper@1.3.0 --save ``` -快速使用： +下面的代码展示了这个库的基本使用场景： ```js -import React, { Component } from "react"; -import { AppRegistry, StyleSheet, Text, View } from "react-native"; +/** + * Sample React Native App + * https://github.com/facebook/react-native + * @flow + */ + +import React, { Component } from 'react'; +import { + StyleSheet, + Text, + Button, + View, + Dimensions, + ScrollView, + SafeAreaView, + Image +} from 'react-native'; + +const { width } = Dimensions.get('window'); +import EZSwiper from 'react-native-ezswiper'; + +export default class ezswiperApp extends Component<{}> { + constructor(props) { + super(props) + this.state = { + currentPage: 0, + }; + } + + renderTitle(title) { + return {title} + } + + renderRow(obj, index) { + return ( + + {obj} + + ) + } + + renderImageRow(obj, index) { + return ( + + + {'Victoria\'s Secre ' + index} + + + ) + } + + + onPressRow(obj, index) { + console.log('onPressRow=>obj:' + obj + ' ,index:' + index); + alert('onPressRow=>obj:' + obj + ' ,index:' + index); + } + + onWillChange(obj, index) { + console.log('onWillChange=>obj:' + obj + ' ,index:' + index); + } + + onDidChange(obj, index, setDidChangeObj, setIndex) { + setDidChangeObj(obj); + setIndex(index) + } + + render() { + + return ( + + + + card:ratio 0.6 + + + + left + + + + right + + + + normal + + + + card ratio:0.867 loop:false index:2 + + + + + + card ratio:0.867 horizontal:false + + + + + + + + + ); + } +} + + +const DidChangeDom = (props) => { + const [didChangeObj, setDidChangeObj] = React.useState(0); + const [index, setIndex] = React.useState(0); + + return ( + + + obj:{didChangeObj} index:{index} + + { + setDidChangeObj(obj) + setIndex(index) + }} /> + ) +} + +const WillChangeDom = (props) => { + const [didChangeObj, setDidChangeObj] = React.useState(0); + const [index, setIndex] = React.useState(0); + + return ( + + + obj:{didChangeObj} index:{index} + + { + setDidChangeObj(obj) + setIndex(index) + }} /> + ) +} + +function ScrollToDom(props) { + this.refDom = null; + const refDomFn = (view) => { + this.refDom = view + } + const scrollTo = (index) => { + if (this.refDom) { + this.refDom.scrollTo(index + 1, true) + } + } + return ( + + +