Rotated TouchableOpacity падает на Android при выборе

Я поворачиваю TouchableOpacity (без анимации) как это:

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

Он отлично работает на iOS, но вылетает на Android (см. Тестированные версии ниже):

java.lang.ClassCastException: java.lang.String не может быть приведен к java.lang.Double

Я не могу поставить двойной на rotate, как я получаю инвариантное нарушение. Что я могу сделать?

Среда:

  • ОС: macOS High Sierra 10.13.5
  • Узел: 7.10.0
  • Пряжа: 1.9.4
  • нпм: 4.2.0
  • Сторож: 4.9.0
  • Xcode: Xcode 9.4.1 Версия сборки 9F2000
  • Android Studio: 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 (как устройство, так и эмулятор)

Прямая ссылка на этот вопрос на Github

Источник

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>
Источник

Magic Answer Вы можете вращать View вместо TouchableOpacity. Изменение ширины и высоты отдельно

<TouchableOpacity  style={{  height: 100, width: 20 }} >
                <View style={{  height: 20, width: 100, transform: [{ rotate: '90deg' }] }}>
                       <Text>PRESS</Text>
                </View>
</TouchableOpacity>
Источник
Другие вопросы по тегам