react-native - 反应导航自定义标签栏动画不起作用

Question

我尝试为标签栏自定义添加动画，但它似乎不起作用
我使用反应导航和自定义标签栏（https://reactnavigation.org/docs/bottom-tab-navigator/#props）

我的代码：

Tabbar.js

import Animated from 'react-native-reanimated';
import { styles } from './style';
import Tab from './Tab';

function TabBar({ state, descriptors, navigation }) {
  const focusedOptions = descriptors[state.routes[state.index].key].options;
  const safeAreainsets = useSafeAreaInsets();
  if (focusedOptions.tabBarVisible === false) {
    return null;
  }

  const activeAni = new Animated.Value(0);

  return (
    <View style={styles.tabbar}>
      <View style={styles.container}>
        <View style={styles.routeContent}>
          {state.routes.map((route, index) => {
            const { options } = descriptors[route.key];
            const isFocused = state.index === index;
            const onPress = () => {
              activeAni.setValue(index);

              const event = navigation.emit({
                type: 'tabPress',
                target: route.key,
                canPreventDefault: false,
              });
              if (!isFocused && !event.defaultPrevented) {
                navigation.navigate(route.name);
              }
            };

            const onLongPress = () => {
              navigation.emit({
                type: 'tabLongPress',
                target: route.key,
              });
            };
            return (
              <Tab
                key={`tabbar_${index}`}
                onPress={onPress}
                onLongPress={onLongPress}
                isFocused={isFocused}
                index={index}
                options={options}
                activeAnimated={activeAni}
              />
            );
          })}
        </View>
        <View style={{ paddingBottom: safeAreainsets.bottom }} />
      </View>
    </View>
  );
}

Tab.js

import Animated, { eq, multiply } from 'react-native-reanimated';
import { withTransition } from 'react-native-redash';
import { styles } from './style';

const ICON_SIZE = 27;

function Tab({
  isFocused,
  options,
  index,
  activeAnimated,
  onPress,
  onLongPress,
}) {
  const isActive = eq(activeAnimated, index);
  const activeTransition = withTransition(isActive);
  const width = multiply(activeTransition, ICON_SIZE);

  return (
    <TouchableWithoutFeedback
      accessibilityRole="button"
      accessibilityState={isFocused ? { selected: true } : {}}
      accessibilityLabel={options.tabBarAccessibilityLabel}
      testID={options.tabBarTestID}
      onPress={onPress}
      onLongPress={onLongPress}
      style={styles.button}>
      <View style={styles.stack}>
        <View style={styles.iconBox}>
          <Icon name={options.tabBarIconName} style={styles.defaultIcon} />
        </View>
        <Animated.View style={{ overflow: 'hidden', width }}>
          {cloneElement(
            <Icon
              name={options.tabbarIconActive}
              style={[styles.defaultIcon, styles.focusIcon]}
            />,
          )}
        </Animated.View>
      </View>
    </TouchableWithoutFeedback>
  );
}

当我像下面这样评论 onPress 事件时，动画效果很好

 const onPress = () => {
   activeAni.setValue(index);

//   const event = navigation.emit({
//     type: 'tabPress',
//     target: route.key,
//     canPreventDefault: false,
//   });
//   if (!isFocused && !event.defaultPrevented) {
//     navigation.navigate(route.name);
//   }
 };

似乎单击时，选项卡栏会重新呈现，然后动画将不起作用，我的情况有什么解决方案吗？谢谢。

标签： react-native