React native 如何在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, 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>
  );
};

export const TabAddButton=（）=>{
const windowWidth=useWindowDimensions（）.width；
const buttonSize=useRef（新的动画.Value（1））.current；
const mode=useRef（新的动画.Value（0））.current；
常数手柄压力=（）=>{
动画序列([
动画。计时（按钮化{
toValue:0.95，
持续时间：5，
useNativeDriver：没错，
}),
动画。定时（模式{
toValue:mode[“_value”]==0？1:0，
持续时间：150，
useNativeDriver：错误，
}),
]).start（）；
}; 
const lockX=mode.interpolate({
输入范围：[0，1]，
outputRange:[windowWidth/2-22，windowWidth/2-22-60]，
});
const lockY=mode.interpolate({
输入范围：[0，1]，
输出范围：[-20，-75]，
});
const noteX=mode.interpolate({
输入范围：[0，1]，
outputRange:[windowWidth/2-22，windowWidth/2-22+60]，
});  
返回(
我建议这样做

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>
  );
};

childButtons=[
{
第一：错，
我的名字是：“锁”，
我键入：“羽毛”，
onPress:（）=>{}，
},
{
第一：错，
iconName:“剪贴板注释”，
i类型：“基金会”，
onPress:（）=>{}，
},
/** ... */
];
const AppTabSecondaryButton=（{containerStyle，onPress，IconType，iconName}）=>(
);
const AppTabPrimaryButton=（{containerStyle，onPress，IconType，iconName}）=>{
};
导出常量TabAddButton=（{childButtons}）=>{
/**其他东西*/
const lockX=mode.interpolate({
输入范围：[0，1]，
outputRange:[windowWidth/2-22，windowWidth/2-22-60]，
});
const lockY=mode.interpolate({
输入范围：[0，1]，
输出范围：[-20，-75]，
});
const noteX=mode.interpolate({
输入范围：[0，1]，
outputRange:[windowWidth/2-22，windowWidth/2-22+60]，
});
常量BTN容器样式=[
[styles.secondaryView，{left:lockX，top:lockY，}]，
[styles.secondaryView，{left:lockX，top:noteY}]，
/** ... */
];
返回(
{childButtons.map（{iconName，iconType，onPress，isPrimary}，index）=>(
一级？（）：
()  
))}
);
};
你打算将其用作react navigation>BottomTabNavigator的
tabBarComponent
吗？是的，它适用于整个tabbar，但这只是一个按钮。我添加了一个gif来提问，弹出的图标会根据活动路线而变化……还是会被固定？不，它们对于每个路线都是相同的。但是AppChil的左和右属性每个按钮的按钮都必须不同。@OğulcanKarayel它们根据位置不同而不同，我相信leftBtn、centerBtn、rigthBtn..正确吗？是的，没错。其中一个按钮是left，另一个是top etcAny recommendation？@OğulcanKarayel你检查过答案了吗？我不知道我是否能够传达我想要的概念。。。