react-native如何自定义android高程阴影

thu*_*urt 7 react-native

使用特定于android的样式规则,elevation使用时会产生令人讨厌的"晕"效果.例如,此图像显示elevation: 20:

在此输入图像描述

即使是一个小的高度1,2或3也给出了元素"晕"/有边框(坏)的外观

在此输入图像描述

如何为特定于android的阴影添加更多自定义以消除光环效应.ios有像shadowOpactiy,shadowRadius,shadowOffset这样的特定规则 - 但我没有看到任何关于android的东西.

Val*_*aXD 1

根据官方文档,不存在诸如shadowopacity之类的东西或任何更改默认阴影的方法,因为这是通过“材料设计”设计的来源:https ://developer.android.com/training/material/shadows-clipping

但是您可以做的是使用具有所需边框的虚拟视图的组件,然后在渲染函数中使用它,例如

render(){
  <View style={{flex:1}}>
    <Viewwithborder>
     //pass the item you want to have custom elevation here
    </Viewwithborder>
  </View>
}
Run Code Online (Sandbox Code Playgroud)

在你的自定义“viewwithborder”中你只需这样做

   render(){
   <View style={{styles.CustomElevationStyle}}>
      {this.props.children}
   </View> 
}
Run Code Online (Sandbox Code Playgroud)