单击按钮旋转图像

如何解决单击按钮旋转图像

因此，我尝试在单击按钮时旋转图像，为简单起见，我有上下两个按钮，我只是将一个按钮更改为20deg，下面的第二秒更改为0。

@observer
class App extends Component {
  rotate = observable({ angle: '10deg' })

  constructor(props) {
    super(props);
  }
  render() {
    return (
      <View>
        <imagebackground
          resizeMode="cover"
          source={require('@images/test_pointer.png')}
          style={{
            backgroundColor: 'black',justifyContent: 'center',alignItems: 'center',transform: [{ rotate: this.rotate.angle }]
          }} >
          <Image
            source={require('@images/test_on.png')}
            style={{ justifyContent: 'center' }} />
        </imagebackground>
        <TouchableOpacity onPress={() => {
          console.log("20deg?");
          this.rotate.angle = '20deg'
        }}>
          <Text>UP</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={() => {
          console.log("0deg?");
          this.rotate.angle = '0deg'
        }}>
          <Text>Down</Text>
        </TouchableOpacity>
      </View>
    )
  }
}

export default App;

我可以在日志中看到按钮正在执行并且它正在改变角度，但是图像没有旋转，这是我做错了吗？

如果我将图像背景标签更改为图像并删除内部图像标签，则旋转将按预期进行，但我希望图像背景旋转。 预先感谢。