React native 如何使用状态动态更改React Native transform？

我正在构建一个自定义视图，该视图将根据设备方向旋转其内容。这个应用程序的方向锁定为纵向，我只想旋转一个视图。它获取当前设备方向，更新状态，然后使用更新的

样式={{{transform:[{rotate:'xxxdeg'}]}}

呈现新组件

我正在使用

react native orientation locker

检测方向更改

视图在第一次渲染时正确旋转。例如，如果在设备旋转时加载屏幕，则会使视图旋转。但当改变设备或模拟器的方向时，视图不会旋转。它在初始化时的

rotate

值处保持锁定

对

变换

旋转

值的更新似乎不会更改旋转。我已经验证了在渲染期间是否存在新的

rotate

值。我已验证方向更改是否正确更新状态。但当方向改变时，视图在UI中永远不会旋转。这就好像React Native在渲染过程中没有接收到对

旋转

值的更改

我希望对

rotate

值的更新会相应地旋转

视图

，但情况似乎并非如此。是否有其他方法来实现这一点，或者我的代码中是否存在缺陷

编辑：

rotate

是否需要成为

Animated

值

import React，{useState，useffect}来自“React”；
从“react native”导入{View}；
从“react native Orientation locker”导入方向；
const RotateView=props=>{
常量getRotation=newOrientation=>{
开关（新方向）{
“横向-左侧”案例：
返回“90度”；
“横向-右侧”案例：
返回'-90度'；
违约：
返回“0度”；
}
};
常量[orientation，setOrientation]=useState(
//将方向设置为初始设备方向
Orientation.getInitialOrientation（），
);
const[rotate，setRotate]=useState(
//将旋转设置为初始旋转值（xxdeg）
getRotation（Orientation.getInitialOrientation（）），
);
useffect（（）=>{
//设置设备方向更改的侦听器
方向。添加设备方向Listener（设置方向）；
return（）=>Orientation.removeDeviceOrientationListener（setOrientation）；
}, []);
useffect（（）=>{
//方向更改时，更新旋转
设置旋转（获取旋转（方向））；
}，[方向]；
//使用当前旋转值渲染视图
返回(
{props.children}
);
};
导出默认旋转视图；

我遇到了同样的问题，通过使用react native reanimated中的动画.View解决了这个问题。（标准react本机软件包中的Animated.View也可以工作，但我还没有选中）。我不需要使用动画值，我仍然只使用来自状态的实际值，它起作用了。

如果使用

动画。值

+

动画。直接从react native查看

，就可以了。 使用

动画.Value

类字段解决了同样的问题（在您的情况下，我想您应该使用

useState

来解决这个问题，因为functional+a

useffect

可以在

道具旋转

发生变化时设置

动画.Value

）的值，然后将其传递到

Animated.View中，作为
transform=[{rotate:animatedRotationValue}]

以下是作为代码段的类组件形式：

界面道具{
轮换：人数；
}
类somethingtheneedsRotation扩展了React.PureComponent{
旋转=新的动画值（0）；
旋转值=this.rotation.interpolate({
输入范围：[0,2*Math.PI]，
输出范围：['0deg'，'360deg']，
});
render（）{
this.rotation.setValue（this.props.rotation）；
常量转换=[{rotate:this.rotationValue}]；
返回(
);
}
}

请注意，在我的示例中，我还有插值，因为我的输入是弧度，我希望它是度。
这里是我完成的处理旋转的组件。当应用程序锁定为纵向时，它将根据设备方向旋转其子项。我相信这可以清理一些，但它的工作为我的目的

import React，{useState，useffect，useRef}来自'React'；
从“react native”导入{Animated，Easing，View，StyleSheet}；
从“../utility/constants”导入{Orientation}；
从“../utility/orientation”导入方向管理器；
const OrientedView=（道具）=>{
const getRotation=useRef（（新方向）=>{
开关（新方向）{
案例方向。横向\左：
返回90；
案例方向。右侧：
返回-90；
违约：
返回0；
}
});
const{duration=100，style}=props；
const initialized=useRef（false）；
const[orientation，setOrientation]=useState（）；
const[rotate，setRotate]=useState（）；
const[containerStyle，setContainerStyle]=useState（styles.containerStyle）；
//动画保留为参考
const rotationAnim=useRef（）；
//侦听方向更改并更新状态
useffect（（）=>{
OrientionManager.getDeviceOrientation（（初始方向）=>{
const initialRotation=getRotation.current（initialOrientation）；
//默认基于初始方向的旋转
setRotate（初始旋转）；
rotationAnim.current=新的动画值（initialRotation）；
setContainerStyle([
样式。集装箱样式，
{
转换：[{rotate:`${initialRotation}deg`}]，
},
]);
initialized.current=true；
//设置方向并触发第一次渲染
设置方向（初始方向）；
});
return (
  <View
    key={rotate} // <~~~ fix!
    style={{transform: [{rotate}]}}
  >
    {props.children}
  </View>
)