React Native Animated不要在第一次点击上工作

Question

我正在使用 React Native 创建一张扑克桌，我希望点击椅子时会发生动画（椅子围绕桌子排列）。

但是第一次点击时动画不起作用，而当我第二次点击时动画就起作用了。

请检查下面的图片

你可以看到桌子周围有 8 把椅子，我想要的是，每当我点击任何桌子时，旋转应该以我点击的桌子的方式进行应该更换绿色table(bottom)

问题是，第一次单击时，useEffect 中的代码可以工作，但仍然不会发生动画。

这是代码

import {
  Animated,
} from 'react-native';

function HomeScreen() {
  const [shiftBy, setSiftBy] = React.useState(0);
  const [p1InitialPosition] = React.useState(new Animated.ValueXY({ x: 180, y: 30 }));
  const [p2InitialPosition] = React.useState(new Animated.ValueXY({ x: 325, y: 125 }));
  const [p3InitialPosition] = React.useState(new Animated.ValueXY({ x: 338, y: 230 }));
  const [p4InitialPosition] = React.useState(new Animated.ValueXY({ x: 335, y: 370 }));
  const [p5InitialPosition] = React.useState(new Animated.ValueXY({ x: 180, y: 470 }));
  const [p6InitialPosition] = React.useState(new Animated.ValueXY({ x: 30, y: 370 }));
  const [p7InitialPosition] = React.useState(new Animated.ValueXY({ x: 30, y: 230 }));
  const [p8InitialPosition] = React.useState(new Animated.ValueXY({ x: 40, y: 125 }));

  const chairs = React.useMemo(() => {
    return [
      p1InitialPosition,
      p2InitialPosition,
      p3InitialPosition,
      p4InitialPosition,
      p5InitialPosition,
      p6InitialPosition,
      p7InitialPosition,
      p8InitialPosition,
    ];
  }, [
    p1InitialPosition,
    p2InitialPosition,
    p3InitialPosition,
    p4InitialPosition,
    p5InitialPosition,
    p6InitialPosition,
    p7InitialPosition,
    p8InitialPosition,
  ]);

  // updated/animated positions

  React.useEffect(() => {
    const np = [];
    for (let i = 0; i < chairs.length; i++) {
      console.log(chairs[i], chairs[(i + shiftBy) % 8]);
      np.push(
        Animated.timing(chairs[i], {
          toValue: chairs[(i + shiftBy) % 8],
          duration: 800,
          useNativeDriver: true,
        }),
      );
    }
    Animated.parallel(np).start();

    console.log('');
  }, [shiftBy]);
  return (
    <SafeAreaView style={styles.container}>
      <Image
        onLayout={event => {
          const layout = event.nativeEvent.layout;
          console.log('height:', layout.height);
          console.log('width:', layout.width);
          console.log('x:', layout.x);
          console.log('y:', layout.y);
        }}
        source={require('../../assets/image/table/table.png')}
        style={{
          height: '100%',
          width: '100%',
        }}
      />
      {/* p1 */}
      <Animated.View
        style={{
          position: 'absolute',
          transform: [{ translateX: p1InitialPosition.x }, { translateY: p1InitialPosition.y }],
        }}>
        <TouchableOpacity
          // disabled={selectedChair}
          onPress={() => setSiftBy(4)}>
          <Icon name="chair" size={30} color="blue" />
        </TouchableOpacity>
      </Animated.View>
      {/* p2 */}
      <Animated.View
        style={{
          position: 'absolute',
          transform: [{ translateX: p2InitialPosition.x }, { translateY: p2InitialPosition.y }],
        }}>
        <TouchableOpacity
          // disabled={selectedChair}
          onPress={() => setSiftBy(3)}>
          <Icon name="chair" size={30} color="skyblue" />
        </TouchableOpacity>
      </Animated.View>
      {/* p3 */}
      {/* p4 */}
      {/* p5 */}
      {/* p6 */}
      {/* p7 */}
      {/* p8 */}
    </SafeAreaView>
  );
}

export default HomeScreen;

这是完成屏幕代码的链接 - snack.expo.dev/sd7yF5CzZ

请帮忙。

Answer 1

解决方案是在您的代码中添加uselayouteffect：

React.useLayoutEffect(() => {
    const np = [];
    for (let i = 0; i < chairs.length; i++) {
      console.log(chairs[i], chairs[(i + shiftBy) % 8]);
      np.push(
        Animated.timing(chairs[i], {
          toValue: chairs[(i + shiftBy) % 8],
          duration: 800,
          useNativeDriver: true,
        }),
      );
    }
    Animated.parallel(np).start();

    console.log('');
  }, [shiftBy]);

解释，

因为useeffect在渲染commit phass easte easte e easte east e e e shose east e easter easte e easte east e e e e eptaim evers 在渲染周期和之后被调用layoutanimation.configurenext是为了“准备”下一个渲染，已经在useffect的内部称呼它已经为时已晚。

因此，解决方案是使用uselayouteffect以及usefect以确保动画在第一次渲染上运行