From 8b67acd5e3896b1089d44e115ea92dd38ed98f9c Mon Sep 17 00:00:00 2001 From: asklie <760956257@qq.com> Date: Sun, 28 Apr 2024 08:02:32 +0000 Subject: [PATCH 1/9] =?UTF-8?q?[Issues:=20#I8K2DK]=20=E6=96=B0=E5=A2=9Erea?= =?UTF-8?q?ct-native-ezswiper=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-ez-swiper.md | 370 ++++++++++++++++++++++++++++++++ 1 file changed, 370 insertions(+) create mode 100644 zh-cn/react-native-ez-swiper.md diff --git a/zh-cn/react-native-ez-swiper.md b/zh-cn/react-native-ez-swiper.md new file mode 100644 index 00000000..03f34f10 --- /dev/null +++ b/zh-cn/react-native-ez-swiper.md @@ -0,0 +1,370 @@ +> 模板版本：v0.1.3 + +

+

react-native-ez-swiper

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] +> +> [Github 地址](https://github.com/react-native-oh-library/react-navigation/tree/sig) + +## 安装与使用 + +请到三方库的 Releases 发布地址查看配套的版本信息：@react-native-oh-tpl/react-native-ezswiper Releases，并下载适用版本的 tgz 包。 + +进入到工程目录并输入以下命令： + +> [!TIP] +> +> # 处替换为 tgz 包的路径 + +#### **npm** + +```bash +npm install @react-native-oh-tpl/react-native-ezswiper@file:# +``` + +#### **yarn** + +```bash +yarn add @react-native-oh-tpl/react-native-ezswiper@file:# +``` + + + +下面的代码展示了这个库的基本使用场景： + +> [!WARNING] +> +> 使用时 import 的库名不变。 + +```js +/** + * Sample React Native App + * https://github.com/facebook/react-native + * @flow + */ + +import React, { Component } from 'react'; +import { + StyleSheet, + Text, + Button, + View, + Dimensions, + ScrollView, + Image +} from 'react-native'; + +const { width } = Dimensions.get('window'); +import EZSwiper from 'react-native-ezswiper'; + +export default class App 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 ( + + + + + + + + + + + + + + ); + } +} + + +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 ( + + +