0

I rotate a TouchableOpacity (without any animation) as this:

transform: [
  { rotate: '45deg' }
]

It works fine on iOS, but crashes on Android (see tested versions below):

java.lang.ClassCastException: java.lang.String cannot be cast to java.lang.Double

I can't put a Double on rotate, as I get a Invariant violation. What can I do?

Environment :

  • OS: macOS High Sierra 10.13.5
  • Node: 7.10.0
  • Yarn: 1.9.4
  • npm: 4.2.0
  • Watchman: 4.9.0
  • Xcode: Xcode 9.4.1 Build version 9F2000
  • Android Studio: 3.2 AI-181.5540.7.32.5014246

Packages:(wanted => installed)

  • react: 16.3.1 => 16.3.1
  • react-native: 0.55.1 => 0.55.1

Tested on:

  • iOS 12 (worked fine on device and simulator)
  • Android 7.0 and 8.1 (both device and emulator)

Direct reference to this issue on Github

4

2 回答 2

1

有条件地使用带有 的弧度Platform，它们将被转换为 double 而不会出错：

import {Platform} from 'react-native'
…
transform: [
  {rotate: (Platform.OS === 'ios') ? '45deg' : (3.14159/4)+'rad'}
]

这将显示正常。

但是，旋转的 TouchableOpacity 顺便失去了它的可触摸行为。

要解决此问题，请使用子视图将您的旋转应用于：

<TouchableOpacity onPress={…}>
  <View style={styles.yourRotation}>
     …
  </View>
</TouchableOpacity>
于 2018-10-11T15:49:26.140 回答
0

魔术答案 您可以旋转视图而不是 TouchableOpacity。分别更改相同的宽度和高度

<TouchableOpacity  style={{  height: 100, width: 20 }} >
                <View style={{  height: 20, width: 100, transform: [{ rotate: '90deg' }] }}>
                       <Text>PRESS</Text>
                </View>
</TouchableOpacity>
于 2019-05-10T05:43:55.427 回答