选择时，旋转的 TouchableOpacity 在 Android 上崩溃

Question

我旋转一个 TouchableOpacity（没有任何动画），如下所示：

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

它在 iOS 上工作正常，但在 Android 上崩溃（请参阅下面的测试版本）：

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

我无法在 rotate 上放置 Double，因为我遇到 不变量违规。我能做什么？

环境：

OS: macOS High Sierra 10.13.5
节点：7.10.0
纱线：1.9.4
npm: 4.2.0
守望者：4.9.0
Xcode: Xcode 9.4.1 构建版本 9F2000
Android工作室：3.2 AI-181.5540.7.32.5014246

软件包：（需要 => 已安装）

反应：16.3.1 => 16.3.1
本机反应：0.55.1 => 0.55.1

测试于：

iOS 12（在设备和模拟器上运行良好）
Android 7.0 和 8.1（设备和模拟器）

Direct reference to this issue on Github

Answer 1

有条件地将弧度与 Platform 一起使用，它们将无错误地转换为双精度：

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

神奇答案 您可以旋转 View 而不是 TouchableOpacity。分别更改相同的宽度和高度

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

选择时，旋转的 TouchableOpacity 在 Android 上崩溃

Rotated TouchableOpacity crashes on Android when selected

android

react-native

touchableopacity

react-native-stylesheet