我想在没有边框和传播的 native react 中实现带有阴影的按钮,我尝试过这样的事情,

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

但是阴影没有扩散,偏移也没有按预期工作。我想实现这样的目标,

Codepen

请您参考如下方法:

尝试直接在 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' 
  } 
}); 


评论关闭
IT干货网

微信公众号号:IT虾米 (左侧二维码扫一扫)欢迎添加!