From 99c7771e3d09574e4e20cac1b2877b5904456670 Mon Sep 17 00:00:00 2001 From: dong Date: Tue, 30 Apr 2024 14:58:50 +0800 Subject: [PATCH 1/2] =?UTF-8?q?[Issues:=20#I9KN60]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-modal=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-flip-card.md | 242 ++++++++++++++++++++++++++++++++ 1 file changed, 242 insertions(+) create mode 100644 zh-cn/react-native-flip-card.md diff --git a/zh-cn/react-native-flip-card.md b/zh-cn/react-native-flip-card.md new file mode 100644 index 00000000..26f33056 --- /dev/null +++ b/zh-cn/react-native-flip-card.md @@ -0,0 +1,242 @@ +> 模板版本：v0.2.0 + +

+

react-native-flip-card

+

+

+ + License + + +

+ + + + + +> [!TIP] [Github 地址](https://github.com/moschan/react-native-flip-card) +## 安装与使用 + + +#### **npm** + +```bash +npm i react-native-flip-card@3.5.7 +``` + +#### **yarn** + +```bash +yarn add react-native-flip-card@3.5.7 +``` + + + +下面的代码展示了这个库的基本使用场景： + + +```js +import React, { useState } from 'react'; +import FlipCard from 'react-native-flip-card' +import { Text, View, StyleSheet, ScrollView,TouchableOpacity } from 'react-native'; + +export const FlipCardExample = () => { + const styles = StyleSheet.create({ + container: { + flex: 1, + justifyContent: 'center', + alignItems: 'center', + backgroundColor: '#F5FCFF', + }, + welcome: { + fontSize: 20, + textAlign: 'center', + margin: 10, + marginTop: 20, + }, + instructions: { + textAlign: 'center', + color: '#333333', + marginBottom: 5, + }, + card: { + width: 200, + marginTop:20 + }, + face: { + flex: 1, + backgroundColor: '#2ecc71', + justifyContent: 'center', + alignItems: 'center', + }, + back: { + flex: 1, + backgroundColor: '#f1c40f', + justifyContent: 'center', + alignItems: 'center', + }, + button: { + width: 100, + height: 30, + marginTop: 30, + paddingTop: 6, + paddingBottom: 6, + borderRadius: 3, + borderWidth: 1, + backgroundColor: '#007AFF', + borderColor: 'transparent', + }, + buttonText: { + color: '#fff', + textAlign: 'center', + }, + img: { + flex: 1, + height: 64 + } + }); + const [flip,setFlip] = useState(false); +var CARDS = [1, 2, 3, 4, 5, 6, 7, 8, 9]; + const MyFlipCard = ({val}) => { + return ( + + + {/* Face Side */} + + Card {val} + + {/* Back Side */} + + The back side + + + + ) + } +const createCard = (val, i) => + + return ( + + + Flip Card Example + + Minimal + + {/* Face Side */} + + The Face + + {/* Back Side */} + + The Back + + + + Customized + { console.log('isFlipStart', isFlipStart) }} + useNativeDriver={true} + > + {/* Face Side */} + + The Face + + {/* Back Side */} + + The Back + + + { console.log('isFlipEnd', isFlipEnd) }} + > + {/* Face Side */} + + The Face + + {/* Back Side */} + + T + h + e + + B + a + c + k + + + + + {setFlip({flip: !flip})}} + > + Flip + + + + {CARDS.map(createCard)} + + + + + ) + + +} +``` +## 约束与限制 + +### 兼容性 + +1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：204.1.0.59; +2. RNOH：0.72.20; SDK：HarmonyOS NEXT Developer Beta1 B.0.18、HarmonyOS NEXT Developer Preview0 B.0.60、HarmonyOS NEXT Developer Preview2 B.0.73; IDE：DevEco Studio 5.0.3.200; ROM：2.0.0.18; + ## 属性 + +### FlipCard + +该库为UI组件库，通过配置属性标签，实现对应的功能。 + +| Prop | Type |Description | Default | HarmonyOS Support | +| ----------- | -------------------------------------------------- | ------------ | ----------------- |----------------- | +| flip |bool|If you change default display side, you can set true to this param. If you change side, you can pass bool variable dynamically. | false | yes | +|clickable |bool| If you want to disable click a card, you can set false to this paramicon. | true | yes | +| friction |number| The friction of card animation | 6 | yes | +| perspective |number| The amount of perspective applied to the flip transformation | 0 | yes | +| flipHorizontal |bool| If you set true, a card flip to horizontal. | false | yes | +| flipVertical |bool| If you set false, a card not flip to vertical. If you set true both flipHorizontal and flipVertical , a card flip to diagonal. | true | yes | +|onFlipStart |function| When a card starts a flip animation, call onFlipEnd function with param. | NA | yes | +|onFlipEnd |function| When a card finishes a flip animation, call onFlipEnd function with param. | NA | yes | +|alignHeight |bool| If you pass true to alignHeight param, the card keep height of bigger side. | false | yes | +|alignWidth |boolean| If you pass true to alignWidth param, the card keep width of bigger side. | false | yes | +|useNativeDriver |boolean| If you pass true to useNativeDriver param, the card animation will utilize the native driver. | false | yes | + + + + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/moschan/react-native-flip-card/blob/master/LICENSE) ，请自由地享受和参与开源。 + + -- Gitee From 63566a3c484db6b1fe8a09a05ee6d6807973bfde Mon Sep 17 00:00:00 2001 From: dong Date: Tue, 30 Apr 2024 15:37:07 +0800 Subject: [PATCH 2/2] =?UTF-8?q?[Issues:=20#I9KN60]=20=E6=B7=BB=E5=8A=A0rea?= =?UTF-8?q?ct-native-flip-card=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-flip-card.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/zh-cn/react-native-flip-card.md b/zh-cn/react-native-flip-card.md index 26f33056..e1b0f015 100644 --- a/zh-cn/react-native-flip-card.md +++ b/zh-cn/react-native-flip-card.md @@ -4,7 +4,7 @@

react-native-flip-card

- + License -- Gitee