Создайте эффект «Поднятый» или «Тень» для TouchableOpacity: React Native - PullRequest
Новая
       86

Создайте эффект «Поднятый» или «Тень» для TouchableOpacity: React Native

0 голосов
/ 03 мая 2018

Я использую react-native-elements, и они позволяют легко заставить реальную кнопку казаться «поднятой» или затененной. Я хочу дублировать этот вид для TouchableOpacity.

Вот пример "поднятых кнопок" с react-native-elements. Raised button example

Это тонко, но заметно оказывает приятное влияние. Как бы вы подражали этому эффекту с помощью TouchableOpacity?

И да, я просмотрел документы. Если я что-то пропустил, пожалуйста, укажите на это ... но я не думаю, что что-то есть для этого. Спасибо.

1 Ответ

0 голосов
/ 03 мая 2018

Вы можете добавить следующие стили к вашему TouchableOpacity, чтобы сделать его поднятым. 

<TouchableOpacity style={styles.button} />

  button: {
    shadowColor: 'rgba(0,0,0, .4)', // IOS
    shadowOffset: { height: 1, width: 1 }, // IOS
    shadowOpacity: 1, // IOS
    shadowRadius: 1, //IOS
    backgroundColor: '#fff',
    elevation: 2, // Android
    height: 50,
    width: 100,
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row',
},

Подробнее о них можно прочитать здесь.

Реквизиты IOS

Реквизиты для Android

...