环境
环境:
- 操作系统: macOS High Sierra 10.13.1
- Node: 8.9.1
- Yarn: 0.17.10
- npm: 5.6.0
- Watchman: 4.7.0
- Xcode: Xcode 9.2 Build version 9C40b
- Android Studio: 2.3 AI-162.4069837
已安装的软件包:
- react: 16.0.0
- react-native: 0.51.0
复现步骤
运行此代码
import React, {Component} from 'react';
import {View, Text, TouchableOpacity} from 'react-native';
class App extends Component {
render() {
return (<View style={styles.container}>
<View>
<TouchableOpacity style={[styles.boxShadow, shadow]}>
<Text style={styles.text}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>);
}
}
const shadow = {
shadowColor: '#30C1DD',
shadowRadius: 10,
shadowOpacity: 0.6,
elevation: 8,
shadowOffset: {
width: 0,
height: 4
}
}
const styles = {
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center'
},
boxShadow: {
width: 200,
height: 50,
borderRadius: 10,
backgroundColor: '#ed7171',
justifyContent: 'center',
alignItems: 'center'
},
text: {
color: '#ffffff'
}
};
export default App;
预期行为
有没有办法在 Android 中实现这样的阴影效果?
因为 react-native 的 shadow Props 只支持 iOS,所以无法直接使用。
- 需要更改颜色
- 尝试了
elevation
,但无法更改默认的灰色颜色 - 虽然可以使用
shadowColor
props 在 iOS 上实现此功能,但在 Android 上则无法实现,因为它仅支持 iOS。
实际行为
请参见示例代码和预览。
- 它也应该适用于 Android。
- 阴影颜色始终为灰色,尽管我尝试更改...
可重现演示
这是一个示例快照,在其中我只能获得带有默认灰色背景的海拔阴影。