如何在react-native中传递transform属性样式的变量？

Question

我尝试在react-native中传递transform属性样式的变量，但它不起作用。我的代码如下：

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View } from 'react-native';
import { Accelerometer, Gyroscope } from 'react-native-sensors';
import { sensors } from 'react-native-sensors';

export default class Sensors extends Component {

constructor(props) {
  super(props);
  this.state = {
    rotate: 0
  }
}

render() {
  var degree = this.state.rotate;
  return (
    <View style={styles.container}>
      <View style={styles.fleche}></View>
    </View>
  );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  fleche: {
    width: 5,
    height: 150,
    backgroundColor: '#000000',
    borderRadius: 5,
    transform: [{ rotate: '' + this.state.rotate + 'deg' }],
 }
});

AppRegistry.registerComponent('Compass', () => Sensors);

我不知道在转换样式中传递变量的方法。目前，我有这个错误: undefine不是一个对象(计算'this.state.rotate')。

Answer 1

试试这个：

render(){
    const transform = [{ rotate: this.state.rotate + 'deg' }]
    var degree = this.state.rotate
    return (
        <View style={styles.container}>
            <View style={[styles.fleche, transform]} />
        </View>
    )
}