Question

我想实现具有阴影的按钮，原生反应没有边框和传播，我尝试过这样的事情，

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

但影子并没有扩散，而且抵消也没有像预期的那样发挥作用。我希望实现这样的目标，

Codepen

Answer 1

尝试直接在Button上添加它但没有运气。您可以使用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'
  }
});

按钮中的阴影反应原生

1 个答案: