我想在没有边框和传播的 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'
}
});