如何在本机反应中为标签栏制作可重用组件

Question

我有一个自定义标签栏组件，我想添加一个带动画的按钮，我想使其可重用，但我想不通。例如，我想将它用于 1,2,3... 等图标。我不想在组件本身中决定它。代码如下所示。

export const TabAddButton = () => {
  const windowWidth = useWindowDimensions().width;
  const buttonSize = useRef(new Animated.Value(1)).current;
  const mode = useRef(new Animated.Value(0)).current;
  const handlePress = () => {
    Animated.sequence([
      Animated.timing(buttonSize, {
        toValue: 0.95,
        duration: 5,
        useNativeDriver: true,
      }),
      Animated.timing(mode, {
        toValue: mode["_value"] === 0 ? 1 : 0,
        duration: 150,
        useNativeDriver: false,
      }),
    ]).start();
  }; 
  const lockX = mode.interpolate({
    inputRange: [0, 1],
    outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 - 60],
  });
  const lockY = mode.interpolate({
    inputRange: [0, 1],
    outputRange: [-20, -75],
  });

  const noteX = mode.interpolate({
    inputRange: [0, 1],
    outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 + 60],
  });  
  return (
    <Box {...StyleSheet.absoluteFillObject} alignItems="center">
      <Animated.View
        style={[styles.secondaryView,{ left: lockX,top: lockY,}]}>
        <TouchableOpacity style={styles.secondaryButton}>
          <Feather name="lock" size={24} color="#FFF" />
        </TouchableOpacity>
      </Animated.View>

      <Animated.View style={[styles.secondaryView,{ left: lockX,top: noteY,}]}>
        <TouchableOpacity style={styles.secondaryButton}>
          <Foundation name="clipboard-notes" size={24} color="#FFF" />
        </TouchableOpacity>
      </Animated.View>

      <View style={[styles.button]}>
        <Animated.View style={[transform: [{ scale: buttonSize }]]}>
          <TouchableOpacity activeOpacity={1} onPress={handlePress} style={styles.primaryButton}
          >
            <Animated.View>
              <FontAwesome5 name="plus" size={24} color="#FFF" />
            </Animated.View>
          </TouchableOpacity>
        </Animated.View>
      </View>
    </Box>
  );
};

Answer 1

我会建议这样的事情

childButtons = [
  {
    isPrimary: false,
    iconName: 'lock',
    iconType: 'Feather',
    onPress: () => {},
  },
  {
    isPrimary: false,
    iconName: 'clipboard-notes',
    iconType: 'Foundation',
    onPress: () => {},
  },
  /** ... */
];

const AppTabSecondaryButton = ({ containerStyle, onPress, IconType, iconName }) => (
  <Animated.View style={[styles.secondaryView, containerStyle]}>
    <TouchableOpacity onPress={onPress} style={styles.secondaryButton}>
      <IconType name={iconName} size={24} color="#FFF" />
    </TouchableOpacity>
  </Animated.View>
);

const AppTabPrimaryButton = ({ containerStyle, onPress, IconType, iconName }) => {
  <View style={[styles.button]}>
  <Animated.View style={containerStyle}>
    <TouchableOpacity activeOpacity={1} onPress={onPress} style={styles.primaryButton}
    >
      <Animated.View>
        <IconType name={iconName} size={24} color="#FFF" />
      </Animated.View>
    </TouchableOpacity>
  </Animated.View>
</View>
};

export const TabAddButton = ({ childButtons }) => {
    /** Other stuff */
    const lockX = mode.interpolate({
    inputRange: [0, 1],
    outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 - 60],
  });
  const lockY = mode.interpolate({
    inputRange: [0, 1],
    outputRange: [-20, -75],
  });

  const noteX = mode.interpolate({
    inputRange: [0, 1],
    outputRange: [windowWidth / 2 - 22, windowWidth / 2 - 22 + 60],
  });

  const btnContainerStyles = [
    [styles.secondaryView, { left: lockX, top: lockY,  }],
    [styles.secondaryView, { left: lockX, top: noteY }],
    /** ... */
  ];
  return (
    <Box {...StyleSheet.absoluteFillObject} alignItems="center">
      {childButtons.map(({ iconName, iconType, onPress, isPrimary }, index) => (
        isPrimary ? (<AppTabPrimaryButton /** supply props */ />) :
        (<AppTabSecondaryButton /** supply props */ />)  
      ))}
    </Box>
  );
};