javascript - 如何渲染阴影？

Question

如何在 View 上渲染阴影？我已经尝试了很多 shadowColor、shadowOffset、shadowOpacity 和 shadowRadius 的组合，它们似乎什么都不做。我确信样式应用正确，因为我设置的其他属性有效。

Answer 1

我正在使用 React-Native 0.40，下面的代码在 IOS 和 Android 上都适用。

(仅限 Android)使用 Android 的底层海拔 API 设置 View 的海拔。这会为项目添加阴影并影响重叠 View 的 z 顺序。仅支持 Android 5.0+，对早期版本没有影响。

 class MainApp extends Component {
  render() {
    return (
      <View style={styles.container}>

        <View elevation={5} style={styles.buttonContainer}>
          <Text style={styles.textStyle}>Shadow Applied</Text>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF'
  },
  textStyle: {
    color: '#FFFFFF'
  },
  buttonContainer: {
    backgroundColor: '#2E9298',
    borderRadius: 10,
    padding: 10,
    shadowColor: '#000000',
    shadowOffset: {
      width: 0,
      height: 3
    },
    shadowRadius: 5,
    shadowOpacity: 1.0
  }
})

已在 iPhone 上测试。

编辑

来自@James 的评论。谢谢。

注意: 对于 android 系统，backgroundColor 至关重要。我将 View 用作另一个元素的容器，在我指定背景颜色之前无法获得阴影。