模板版本：v0.4.0

react-native-transitiongroup

本项目基于 react-native-transitiongroup@1.2.0 开发。

该第三方库的仓库已迁移至 Gitcode，且支持直接从 npm 下载，新的包名为：@react-native-ohos/react-native-transitiongroup 版本所属关系如下：

三方库名称	三方库版本	发布信息	支持RN版本	Autolink	编译API版本	社区基线版本	npm地址
@react-native-ohos/react-native-transitiongroup	~ 1.3.0	Gitcode Releases	0.77.*/0.82.*	否	API12+	1.2.0	Npm Address
@react-native-oh-tpl/react-native-transitiongroup	~ 1.2.0-0.0.1	GitHub Releases	0.72.*	否	API12+	1.2.0	Npm Address

1. 安装与使用

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

npm

# 0.72 
npm install @react-native-oh-tpl/react-native-transitiongroup

# 0.77/0.82
npm install @react-native-ohos/react-native-transitiongroup

yarn

# 0.72 
yarn add @react-native-oh-tpl/react-native-transitiongroup

# 0.77/0.82
yarn add @react-native-ohos/react-native-transitiongroup

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

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity, Easing } from "react-native";
import TransitionGroup, {
  FadeInOutTransition,
} from "react-native-transitiongroup";

export function TransitiongroupExample() {
  const [showText, setShowText] = useState(false);

  const handleToggle = () => {
    setShowText(!showText);
  };

  return (
    <View style={styles.container}>
      <View style={styles.relativeContainer}>
        <TouchableOpacity onPress={handleToggle} style={styles.button}>
          <Text style={styles.buttonText}>{showText ? "Hide" : "Show"}</Text>
        </TouchableOpacity>

        <TransitionGroup style={styles.absoluteContainer}>
          {showText && (
            <FadeInOutTransition>
              <Text style={styles.text}>Hello, Transition Group!!</Text>
            </FadeInOutTransition>
          )}
        </TransitionGroup>

        <TransitionGroup style={styles.absoluteContainerTwo}>
          {showText && (
            <FadeInOutTransition inDuration={3000}>
              <Text style={styles.text}>I'm Later</Text>
            </FadeInOutTransition>
          )}
        </TransitionGroup>

        <TransitionGroup style={styles.absoluteContainerThree}>
          {showText && (
            <FadeInOutTransition
              inDuration={1000}
              outDuration={500}
              easing={Easing.ease} 
              inDelay={200}
              outDelay={0}
              pointerEvents="box-only"
              style={{ backgroundColor: "pink" }}
            >
              <Text style={styles.text}>I'm Pink</Text>
            </FadeInOutTransition>
          )}
        </TransitionGroup>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
  },
  relativeContainer: {
    position: "relative",
  },
  button: {
    backgroundColor: "#3f51b5",
    padding: 10,
    borderRadius: 5,
    marginBottom: 20,
  },
  buttonText: {
    color: "#fff",
    fontWeight: "bold",
    fontSize: 16,
  },
  absoluteContainer: {
    position: "absolute",
    bottom: -50,
    left: -100,
  },
  absoluteContainerTwo: {
    position: "absolute",
    bottom: -150,
    left: -100,
  },
  absoluteContainerThree: {
    position: "absolute",
    bottom: -250,
    left: -100,
  },
  text: {
    fontSize: 24,
    fontWeight: "bold",
  },
});

2. 约束与限制

2.1. 兼容性

本文档内容基于以下版本验证通过：

1. RNOH：0.72.33; SDK：OpenHarmony 5.0.0.71(API Version 12 Release); IDE：DevEco Studio 5.0.3.900; ROM：NEXT.0.0.71;
2. RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;
3. RNOH: 0.82.7; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.868; ROM: 6.0.0.112;

3. 属性

Name	Description	Type	Required	Platform	HarmonyOS Support
easing	缓动函数	function	no	All	yes
inDelay	组件加载时开始动画前的延迟时间（毫秒）	number	no	All	yes
inDuration	组件加载时动画的持续时间（毫秒）	number	no	All	yes
outDelay	组件销毁时开始动画前的延迟时间（毫秒）	number	no	All	yes
outDuration	组件销毁时动画的持续时间（毫秒）	number	no	All	yes
pointerEvents	控制View是否可以成为触摸事件的目标	string	no	All	yes
style	组件样式	style	no	All	yes

4. 遗留问题

• 原库使用refs方法，现在改为使用react.createRef方法代替。问题: issue#1
• 原库中使用的ViewPropTypes，现在改为使用PropTypes方法代替。问题: issue#2

5. 其他

6. 开源协议

本项目基于 The MIT License (MIT) ，请自由地享受和参与开源。