android - Rotated TouchableOpacity crashes on Android when selected

Question

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

Answer 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>

Answer 2

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

<TouchableOpacity  style={{  height: 100, width: 20 }} >
                <View style={{  height: 20, width: 100, transform: [{ rotate: '90deg' }] }}>
                       <Text>PRESS</Text>
                </View>
</TouchableOpacity>