如何在React Native中使Tabbar的可重用组件

如何解决如何在React Native中使Tabbar的可重用组件

我有一个自定义的Tabbar组件，我想添加一个带有动画的按钮，并且想使其可重用，但我不知道。例如，我想将其用于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,outputRange: [-20,-75],});

  const noteX = mode.interpolate({
    inputRange: [0,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,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>
  );
};

解决方法

我建议像这样

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

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,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,outputRange: [-20,-75],});

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

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