Question

我要做的是旋转图像标记，我在称为标记和方位的状态下有一系列纬度和经度，并且当标记在地图上移动时，我想将图像旋转到方位

 render() {
    return (
      <View style={styles.container}>
            <MapView style={styles.map}
            initialRegion={{
                    latitude: this.state.latitude,
                    longitude: this.state.longitude,
                    latitudeDelta: 0.01,
                    longitudeDelta: 0.01,
                }}
        >
          {Object.entries(this.state.markers).map((marker, index)=> (
              <MapView.Marker
                key= {index}
                coordinate={getCoordinates(marker)}
                title= {marker.title}
                discription= {index}
              >
                <Image source={require('./assets/test-50.png')} style={{transform: [{ rotate : '${marker.bearing}deg'}]}}/>
            </MapView.Marker>  
            ))}
            </MapView>  
      </View>
    );
   }

问题是我似乎无法将轴承添加为旋转的一部分

style={{transform: [{ rotate : '${marker.bearing}deg'}]}}

如果我输入“ 45deg”这样的值，效果很好，但是我不确定如何在其中获得动态值。不知道是什么问题，对不起，我对此很不满意，所以我想我想念一些东西

Answer 1

style={{transform: [{ rotate : '${marker.bearing}deg'}]}}

如我所见，您使用了单引号。您必须为此使用反引号。它们也称为模板文字，此语法${variableName}仅适用于反引号。有关更多信息，请访问此处： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

使用转换反应本机旋转图像标记

1 个答案: