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

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

react-native reusability