react-native - 如何使用状态动态更改 React Native 转换？

Question

我正在构建一个自定义 View ，它将根据设备方向旋转其内容。这个应用程序的方向锁定为纵向，我只想旋转一个 View 。它获取当前设备方向，更新状态，然后使用更新的 style={{transform: [{rotate: 'xxxdeg'}]}} 渲染新组件。 .

我正在使用 react-native-orientation-locker检测方向变化。

View 在第一次渲染时正确旋转。例如，如果屏幕在设备旋转时加载，它将渲染 View 旋转。但是在更改设备或模拟器的方向时， View 不会旋转。它保持锁定在 rotate初始化时的值。

似乎是对 transform 的更新rotate值不改变旋转。我已经验证了新的 rotate渲染期间存在值。我已经验证方向更改正确更新状态。但是当方向改变时， View 永远不会在 UI 中旋转。就好像 React Native 没有注意到 rotate 的变化渲染期间的值。

我希望更新 rotate值将旋转 View因此，情况似乎并非如此。是否有另一种方法可以完成此操作，或者此代码中是否存在错误？

编辑:是否需要 rotate成为 Animated值(value)？

import React, {useState, useEffect} from 'react';
import {View} from 'react-native';
import Orientation from 'react-native-orientation-locker';

const RotateView = props => {
  const getRotation = newOrientation => {
    switch (newOrientation) {
      case 'LANDSCAPE-LEFT':
        return '90deg';
      case 'LANDSCAPE-RIGHT':
        return '-90deg';
      default:
        return '0deg';
    }
  };

  const [orientation, setOrientation] = useState(
    // set orientation to the initial device orientation
    Orientation.getInitialOrientation(),
  );
  const [rotate, setRotate] = useState(
    // set rotation to the initial rotation value (xxdeg)
    getRotation(Orientation.getInitialOrientation()),
  );

  useEffect(() => {
    // Set up listeners for device orientation changes
    Orientation.addDeviceOrientationListener(setOrientation);
    return () => Orientation.removeDeviceOrientationListener(setOrientation);
  }, []);

  useEffect(() => {
    // when orientation changes, update the rotation
    setRotate(getRotation(orientation));
  }, [orientation]);

  // render the view with the current rotation value
  return (
    <View style={{transform: [{rotate}]}}>
      {props.children}
    </View>
  );
};

export default RotateView;

Answer 1

我有同样的问题，并通过使用来自 react-native-reanimated 的 Animated.View 解决了它。 (来自标准 react-native 包的 Animated.View 也可能有效，但我还没有检查过)。我不需要使用 Animated 值，我仍然只使用状态中的实际值，并且它有效。