Тень в кнопке реагирует родной - PullRequest
Новая
       2

Тень в кнопке реагирует родной

0 голосов
/ 24 апреля 2018

Я хочу добиться кнопки с тенью в реагировать родной без границы и распространения, я пробовал что-то вроде этого, 

{
shadowColor: 'black',
shadowOpacity: 0.8,
elevation: 6,
backgroundColor : "#0000",
shadowRadius: 15 ,
shadowOffset : { width: 56, height: 13},
borderWidth:0,
borderRadius:0,
}

Но тень не распространяется и смещение также не работает, как ожидалось. Я хочу добиться чего-то подобного,

Codepen

1 Ответ

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

Попытка добавить его непосредственно на кнопку, но не повезло.Вы можете попробовать этот способ, используя TouchableOpacity. 

import React, { Component } from 'react';
import { View, StyleSheet, Button, TouchableOpacity } from 'react-native';

export default class App extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity style={styles.button}>
          <Button title="Submit" />
        </TouchableOpacity>

        <TouchableOpacity style={styles.buttonHover}>
          <Button title="Submit" />
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
  },
  button: {
    borderRadius:25,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 50,
    paddingRight: 50,
    backgroundColor: '#FFFFFF',
    shadowColor: 'rgba(0, 0, 0, 0.1)',
    shadowOpacity: 0.8,
    elevation: 6,
    shadowRadius: 15 ,
    shadowOffset : { width: 1, height: 13},
  },
  buttonHover: {
    marginTop: 10,
    borderRadius:25,
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 50,
    paddingRight: 50,
    shadowColor: 'rgba(46, 229, 157, 0.4)',
    shadowOpacity: 1.5,
    elevation: 8,
    shadowRadius: 20 ,
    shadowOffset : { width: 1, height: 13},
    backgroundColor: '#2EE59D',
    color: '#FFFFFF'
  }
});
...