模板版本：v0.2.2

[!TIP] Github 地址

安装与使用

请到三方库的 Releases 发布地址查看配套的版本信息：@tuya-oh/react-native-card-flip Releases，并下载适用版本的 tgz 包。

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

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

npm

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

yarn

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

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

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

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

属性

[!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) ，请自由地享受和参与开源。