@tuya-oh/react-native-card-flip

模板版本：v0.2.2

react-native-card-flip

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