Javascript 如何使此自定义按钮组件在不同控件之间可重用？

我有一个自定义组件类，我将其应用于我的React原生按钮，它具有预期的伸缩行为（添加动画以缩小和调整大小），这是我想要的行为。但是，我希望我的应用程序中的其他控件（例如卡片）具有相同的动画效果。我想知道，如何更改这个类以使其更具可扩展性

这是我的密码：

import React from "react";
import { StyleSheet, Text, TouchableWithoutFeedback, Animated} from "react-native";
import Colors from "./Colors";
import Fonts from "./Fonts";

export default class TouchableBounce extends React.Component {

  constructor(props) {
    super(props);

    this.handlePressIn = this.handlePressIn.bind(this);
    this.handlePressOut = this.handlePressOut.bind(this);

  }

  componentWillMount() {
    this.animatedValue = new Animated.Value(1);
  }

  handlePressIn() {
    Animated.spring(this.animatedValue, {
      toValue: .5
    }).start()
  }

  handlePressOut() {
    Animated.spring(this.animatedValue, {
      toValue: 1,
      friction: 5,
      tension: 40
    }).start()
  }

  render() {

    const animatedStyle = {
        transform: [{ scale: this.animatedValue}]
      }

    const {
        disabled,
        text,
        color,
        backgroundColor,
        style,
        showArrow,
        testID,
        buttonStyle

    } = this.props;

    return (
      <TouchableWithoutFeedback
        onPressIn={this.handlePressIn}
        onPressOut={this.handlePressOut}
        disabled={disabled}
        style={[styles.buttonContainer, style]}
        testID={testID || `button_${text}`}
      >
        <Animated.View
          style={[
            styles.button,
            disabled ? { opacity: 0.5 } : {},
            { backgroundColor },
            buttonStyle,
            animatedStyle
          ]}
        >
          <Text style={[styles.buttonText, { color }]}>{text.toUpperCase()}</Text>
          {showArrow && (
            <Text
              style={{
                fontSize: 20,
                fontWeight: "bold",
                color: "white",
                fontFamily: "system font",
                marginBottom: 1
              }}
            >
              {" "}
              →
            </Text>
          )}
        </Animated.View>
      </TouchableWithoutFeedback>
    );
  }
} 

TouchableBounce.defaultProps = {
  disabled : false,
  color : Colors.white,
  backgroundColor : Colors.mainAccent,
  style : {},
  showArrow : false,
  testID : "",
  buttonStyle : {}
}

const styles = StyleSheet.create({
  buttonContainer: {
    alignSelf: "stretch",
    marginTop: 35,
    marginBottom: 35
  },
  button: {
    borderRadius: 4,
    padding: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "center"
  },
  buttonText: {
    textAlign: "center",
    fontFamily: Fonts.montserratBold,
    fontSize: 16
  }
});

从“React”导入React；
从“react native”导入{样式表，文本，无反馈触摸，动画}；
从“/Colors”导入颜色；
从“/Fonts”导入字体；
导出默认类TouchableBounce扩展React.Component{
建造师（道具）{
超级（道具）；
this.handlePressIn=this.handlePressIn.bind（this）；
this.handlePressOut=this.handlePressOut.bind（this）；
}
组件willmount（）{
this.animatedValue=新的Animated.Value（1）；
}
手加压素（）{
Animated.spring（此.animatedValue{
toValue:.5
}).start（）
}
handlePressOut（）{
Animated.spring（此.animatedValue{
toValue:1，
摩擦：5，
张力：40
}).start（）
}
render（）{
常量animatedStyle={
变换：[{scale:this.animatedValue}]
}
常数{
残废
文本
颜色
背景色，
风格
showArrow，
睾丸，
钮扣样式
}=这是道具；
返回(
{text.toUpperCase（）}
{showArrow&&(
{" "}
→
)}
);
}
} 
TouchableBounce.defaultProps={
残疾人士:错,，
颜色：颜色，白色，
背景颜色：Colors.main重音，
样式：{}，
showArrow：错，
睾丸：“，
按钮样式：{}
}
const styles=StyleSheet.create({
按钮容器：{
自我调整：“伸展”，
玛金托普：35，
marginBottom:35
},
按钮：{
边界半径：4，
填充：20，
flexDirection:“行”，
对齐项目：“中心”，
为内容辩护：“中心”
},
按钮文字：{
textAlign：“居中”，
fontFamily:Fonts.montserratBold，
字体大小：16
}
});

编辑：我有一个问题，我应该在哪里更改组件的嵌套。在我的主渲染函数中有这个片段

const card = active ? (
      <ActiveCard purchase={active} />

    ) : (
      <InactiveCard />
    );

{!this.props.foo && (
                <View>
                  <TouchableOpacity
                    testID={"TOUCHABLE_CARD"}
                    onPress={() => {
                      this.tapCard(active);
                    }}
                  >
                    {card}
                  </TouchableOpacity>
                </View>
              )}

const卡=激活？(
) : (
);

在我返回的渲染中，有一个片段

const card = active ? (
      <ActiveCard purchase={active} />

    ) : (
      <InactiveCard />
    );

{!this.props.foo && (
                <View>
                  <TouchableOpacity
                    testID={"TOUCHABLE_CARD"}
                    onPress={() => {
                      this.tapCard(active);
                    }}
                  >
                    {card}
                  </TouchableOpacity>
                </View>
              )}

{！this.props.foo&&(
{
此.tapCard（活动）；
}}
>
{card}
)}

---

我应该在哪里包装TouchableBounce？在这两个位置还是其中一个位置？

尝试将它们作为

TouchableBounce

<TouchableBounce>
  <CardView/>
</TouchableBounce>

在TouchableBounce中，将它们渲染为

<TouchableWithoutFeedback
  onPressIn={this.handlePressIn}
  onPressOut={this.handlePressOut}
  disabled={disabled}
  style={[styles.buttonContainer, style]}
  testID={testID || `button_${text}`}
>
  <Animated.View
    style={[
      styles.button,
      disabled ? { opacity: 0.5 } : {},
      { backgroundColor },
      buttonStyle,
      animatedStyle
    ]}
  >
    {this.props.children}//Here is the cardview that you have sent
  </Animated.View>
</TouchableWithoutFeedback>

还有官方文件
儿童在哪里什么？我在执行上述操作时出错。@Euridice01我附加了一个演示，以便于理解。非常感谢！我来看看。我还编辑了我的帖子，问了一个关于在哪里修改嵌套组件的问题。让我知道这是否有意义？你想让你的活动和非活动卡通过触摸设置动画。如果这是你想要的，那么让我知道在实现它时是否有任何问题。祝你编码愉快！