Shadow in button in react native

问题

I wanna achieve button with shadow in react native with no border and spread, I have tried something like this,

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

But the shadow is not spreading and offset is not also working as expected. I want to achieve something like this,

Codepen

回答1:

Tried adding it directly on Button but no luck. You can try this way by using 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'
  }
});

来源：https://stackoverflow.com/questions/50003403/shadow-in-button-in-react-native

标签

react-native-android