react-native - native 基础页脚接受玩家在 native react 中的触摸

Question

我有一个 MainFooter包含页脚和迷你播放器的组件，单击时动画显示为全 View 。我有一个问题，每当我们点击一​​个页脚选项卡时，播放器最大化然后卡在那里，没有响应。
此外，播放器内部的向下箭头图标在单击时不会将其最小化，单击 MiniPlayer 也不会将其最大化，但是我们可以通过单击并将其拖动到全 View 来最大化 MiniPlayer，对于最大化的 Player 也是如此。
这是MainFooter成分:

export const MainFooter = ({ setCounter, counter }: Props) => {
  const translationY = new Value(0);
  const velocityY = new Value(0);
  const state = new Value(State.UNDETERMINED);
  const offset = new Value(SNAP_BOTTOM);
  const goUp: Animated.Value<0 | 1> = new Value(0);
  const goDown: Animated.Value<0 | 1> = new Value(0);

  const gestureHandler = onGestureEvent({
    state,
    translationY,
    velocityY,
  });

  const translateY = clamp(
    withSpring({
      state,
      value: translationY,
      velocity: velocityY,
      snapPoints: [SNAP_TOP, SNAP_BOTTOM],
      config,
    }),
    SNAP_TOP,
    SNAP_BOTTOM
  );

  const translateY_ = withSpring({
    value: clamp(translationY, SNAP_TOP, SNAP_BOTTOM),
    velocity: velocityY,
    offset,
    state,
    snapPoints: [SNAP_TOP, SNAP_BOTTOM],
    config,
  });

  const translateBottomTab = interpolate(translateY, {
    inputRange: [SNAP_BOTTOM - TABBAR_HEIGHT, SNAP_BOTTOM],
    outputRange: [TABBAR_HEIGHT, 0],
    extrapolate: Extrapolate.CLAMP,
  });

  const opacity = interpolate(translateY, {
    inputRange: [SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT, SNAP_BOTTOM],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP,
  });

  const opacity2 = interpolate(translateY, {
    inputRange: [
      SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT * 2,
      SNAP_BOTTOM - MINIMIZED_PLAYER_HEIGHT,
    ],
    outputRange: [0, 1],
    extrapolate: Extrapolate.CLAMP,
  });

  return (
    <>
      <PanGestureHandler {...gestureHandler}>
        <Animated.View
          style={[
            styles.playerSheet,
            { transform: [{ translateY: translateY }] },
          ]}
        >
          <Player
            onPress={() => {
              goDown.setValue(1);
              console.log('player pressed!');
            }}
          />
          <Animated.View
            pointerEvents='none'
            style={{
              opacity: opacity2,
              backgroundColor: '#e0e0e0',
              ...StyleSheet.absoluteFillObject,
            }}
          />
          <Animated.View
            style={{
              opacity,
              position: 'absolute',
              top: 0,
              left: 0,
              right: 0,
              height: MINIMIZED_PLAYER_HEIGHT,
            }}
          >
            <MiniPlayer
              onPress={() => {
                console.log('mini player pressed!');
                goUp.setValue(1);
              }}
            />
          </Animated.View>
        </Animated.View>
      </PanGestureHandler>
      <Animated.View
        style={{ transform: [{ translateY: translateBottomTab }] }}
      >
        <FooterTabsContainer counter={counter} setCounter={setCounter} />
      </Animated.View>
    </>
  );
};

const styles = StyleSheet.create({
  playerSheet: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: '#e0e0e0',
  },
  container: {
    // backgroundColor: '#e0e0e0',
    // position: 'absolute',
    // bottom: 0,
    // left: 0,
    // right: 0,
    // height: TABBAR_HEIGHT,
    // flexDirection: 'row',
    // borderTopColor: 'black',
    // borderWidth: 1,
    height: 'auto',
  },
});

这是 FooterTabsContainer成分:

const FooterTabsContainer = ({ counter, setCounter }: Props) => {
  const tintColor = {
    homeIcon: counter === 0 ? '#FFBC00' : '#555',
    playIcon: counter === 1 ? '#FFBC00' : '#555',
    loveIcon: counter === 2 ? '#FFBC00' : '#555',
    profileIcon: counter === 3 ? '#FFBC00' : '#555',
  };
  return (
    <>
      <Footer>
        <FooterTab style={styles.footerTab}>
          <Button onPress={() => setCounter(0)}>
            <Image
              source={homeIcon}
              style={{ ...styles.footerIcon, tintColor: tintColor.homeIcon }}
            />
          </Button>
          <Button onPress={() => setCounter(1)}>
            <Image
              source={playIcon}
              style={{ ...styles.footerIcon, tintColor: tintColor.playIcon }}
            />
          </Button>
          <Button onPress={() => setCounter(2)}>
            <Image
              source={loveIcon}
              style={{ ...styles.footerIcon, tintColor: tintColor.loveIcon }}
            />
          </Button>
          <Button
            onPress={() => {
              setCounter(3);
              console.log('profile icon clicked!');
            }}
          >
            <Image
              source={profileIcon}
              style={{ ...styles.footerIcon, tintColor: tintColor.profileIcon }}
            />
          </Button>
        </FooterTab>
      </Footer>
    </>
  );
};

export default FooterTabsContainer;

const styles = StyleSheet.create({
  footerTab: {
    backgroundColor: '#FFF',
    borderWidth: 2,
    borderColor: '#f0f0f0',
  },
  footerIcon: {
    width: 25,
    height: 25,
  },
});

在以下情况下为什么会发生这种情况，我将不胜感激:

修复了单击任何页脚选项卡时使 MiniPlayer 最大化的问题。

修复了 MiniPlayer 在单击向下箭头图标时未最大化和全 View 播放器未最小化的问题

我正在使用 "react-native-reanimated": "^1.13.2" , "react-native-redash": "^8.0.0" , "native-base": "^2.15.2" , "react": "16.13.1", "react-native": "^0.64.0",和 "react-native-gesture-handler": "^1.9.0"

Maximized Player

Miniplayer:

Answer 1

这是因为将动画值存储为新值，所以无论何时；迁移到另一个页脚选项卡，由于重新渲染而丢失了状态，并且播放器正在恢复到其原始状态(向上)。在 useRef() 中修复此环绕动画值然后使用它们:

  const translationY = useRef(new Value(0));
  const velocityY = useRef(new Value(0));
  const state = useRef(new Value(State.UNDETERMINED));
  const offset = new Value(SNAP_BOTTOM);
  const goUp: React.MutableRefObject<Animated.Value<0 | 1>> = useRef(
    new Value(0)
  );
  const goDown: React.MutableRefObject<Animated.Value<0 | 1>> = useRef(
    new Value(0)
  );
  .
  .
  .
  const translateY = useRef(
    clamp(
      withSpring({
        state: state.current,
        value: translationY.current,
        velocity: velocityY.current,
        offset,
        snapPoints: [SNAP_TOP, SNAP_BOTTOM],
        config,
      }),
      SNAP_TOP,
      SNAP_BOTTOM
    )
  );