@tuya-oh/react-native-card-flip/README.md

Card flip animation for React Native

> 模板版本：v0.2.2

<p align="center">
  <h1 align="center"> <code>react-native-card-flip</code> </h1>
</p>
<p align="center">
    <a href="https://github.com/lhandel/react-native-card-flip">
        <img src="https://img.shields.io/badge/platforms-android%20|%20ios%20|%20harmony%20-lightgrey.svg" alt="Supported platforms" />
    </a>
    <a href="https://github.com/lhandel/react-native-card-flip">
        <img src="https://img.shields.io/badge/license-MIT-green.svg" alt="License" />
        <!-- <img src="https://img.shields.io/badge/license-Apache-blue.svg" alt="License" /> -->
    </a>
</p>

> [!TIP] [Github 地址](https://gitee.com/rn-mi/ty-react-native-card-flip)

## 安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：[@tuya-oh/react-native-card-flip Releases](https://gitee.com/rn-mi/ty-react-native-card-flip/releases)，并下载适用版本的 tgz 包。

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

> [!TIP] # 处替换为 tgz 包的路径

<!-- tabs:start -->

#### **npm**

```bash
npm install @tuya-oh/react-native-card-flip@file:#
```

#### **yarn**

```bash
yarn add @tuya-oh/react-native-card-flip@file:#
```

<!-- tabs:end -->

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

> [!WARNING] 使用时 import 的库名不变。

```js
import React from 'react';
import {
  TouchableOpacity,
  StyleSheet,
  View,
  Text,
} from 'react-native';

import CardFlip from 'react-native-card-flip';

const App: () => React$Node = () => {
  return (
    <View style={styles.container}>
      <CardFlip style={styles.cardContainer} ref={card => (this.card = card)}>
        <TouchableOpacity
          activeOpacity={1}
          style={[styles.card, styles.card1]}
          onPress={() => this.card.flip()}>
          <Text style={styles.label}>AB</Text>
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={1}
          style={[styles.card, styles.card2]}
          onPress={() => this.card.flip()}>
          <Text style={styles.label}>CD</Text>
        </TouchableOpacity>
      </CardFlip>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  cardContainer: {
    width: 320,
    height: 470,
  },
  card: {
    width: 320,
    height: 470,
    backgroundColor: '#FE474C',
    borderRadius: 5,
    shadowColor: 'rgba(0,0,0,0.5)',
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.5,
  },
  card1: {
    backgroundColor: '#FE474C',
  },
  card2: {
    backgroundColor: '#FEB12C',
  },
  label: {
    lineHeight: 470,
    textAlign: 'center',
    fontSize: 55,
    fontFamily: 'System',
    color: '#ffffff',
    backgroundColor: 'transparent',
  },
});

export default App;
```

## 约束与限制

### 兼容性

要使用此库，需要使用正确的 React-Native 和 RNOH 版本。另外，还需要使用配套的 DevEco Studio 和 手机 ROM。

请到三方库相应的 Releases 发布地址查看 Release 配套的版本信息：[@tuya-oh/react-native-card-flip Releases](https://gitee.com/rn-mi/ty-react-native-card-flip/releases)

## 属性

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

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

### CardFlip props

| Name          | Description                                                                            | Type     | Required | Platform    | HarmonyOS Support |
| ------------- | -------------------------------------------------------------------------------------- | -------- | -------- | ----------- | ----------------- |
| style         | container style                                                                        | object   | no       | iOS/Android | yes               |
| duration      | flip duration                                                                          | number   | no       | iOS/Android | yes               |
| flipZoom      | zoom level on flip                                                                     | number   | no       | iOS/Android | yes               |
| flipDirection | the rotation axis. 'x' or 'y                                                           | string   | no       | iOS/Android | yes               |
| perspective   | 3D stereoscopic effect                                                                 | number   | no       | iOS/Android | yes               |
| onFlip        | function to be called when a card is fliped. it receives the card-sides index          | function | no       | iOS/Android | yes               |
| onFlipStart   | function to be called when the flip-animation starts. it receives the card-sides index | function | no       | iOS/Android | yes               |
| onFlipEnd     | function to be called when the flip-animation ends. it receives the card-sides index   | function | no       | iOS/Android | yes               |

### CardStack actions

| Name   | Description      | Type     | Required | Platform    | HarmonyOS Support |
| ------ | ---------------- | -------- | -------- | ----------- | ----------------- |
| flip   | Flips the card   | function | no       | iOS/Android | yes               |
| tip    | Flips the card   | function | no       | iOS/Android | yes               |
| jiggle | Jiggles the card | function | no       | iOS/Android | yes               |

### tip

| Name      | Description   | Type   | Required | Platform    | HarmonyOS Support |
| --------- | ------------- | ------ | -------- | ----------- | ----------------- |
| direction | tip direction | string | no       | iOS/Android | yes               |
| progress  | tip frequency | number | no       | iOS/Android | yes               |
| duration  | tip duration  | number | no       | iOS/Android | yes               |

### jiggle

| Name     | Description      | Type   | Required | Platform    | HarmonyOS Support |
| -------- | ---------------- | ------ | -------- | ----------- | ----------------- |
| count    | Jiggle count     | number | no       | iOS/Android | yes               |
| duration | Jiggle duration  | number | no       | iOS/Android | yes               |
| progress | Jiggle frequency | number | no       | iOS/Android | yes               |


## 其他

## 开源协议

本项目基于 [The MIT License (MIT)](https://github.com/lhandel/react-native-card-flip/blob/master/LICENSE) ，请自由地享受和参与开源。