React-native <View>组件的"elevation"样式会导致丑陋的阴影。

Question

elevation样式属性可在Android 5.0+上启用盒阴影。

在这里，我是否对“elevation”进行了不寻常的处理，导致下面截图中可以看到的瑕疵？此外，有没有办法定义阴影偏移量？

模拟器正在运行6.0（> 5.0），因此那不是问题。 我正在运行react-native 25.1。

  "dependencies": {
    "react": "^0.14.8",
    "react-native": "^0.25.1",
    "react-native-gcm-android": "^0.2.0",
    "react-native-material-design": "^0.3.5",
    "react-native-system-notification": "^0.1.10",
    "react-redux": "^4.4.5",
    "redux": "^3.5.2"
  }

这是 React Native 的 View 组件样式文档

这是我的渲染方法:

  render() {
    return (
      <ListView
        dataSource={alertData}
        renderRow={(rowData) =>
          <View style={style.cardContainer}>
            <Text>{rowData.blah}</Text>
            <Text>{"#" + rowData.foo}</Text>
            <Text>{rowData.blah}</Text>
            <Text>{rowData.foo}</Text>
            <Text>{rowData.baz}</Text>
          </View>
        }
      />
    );
  }

并且样式声明：

var style = StyleSheet.create({
  cardContainer : {
    elevation   : 3,
    flex        : 1,
    margin      : 10,
    padding     : 10,
    borderWidth : 2,
    borderColor : beeStyles.colors.lightGray
  }
});

这在某种程度上导致了这个......

- Squeaky

Answer 1

缺少的部分是backgroundColor。在View容器中添加backgroundColor : '<anything>'样式可以使那些奇怪的内部阴影消失。

- Squeaky

---

RN 是否正在解决这个问题？ - gorjanz

@gorjanz 这是一个 Android 问题，而不是 RN 问题。如果您尝试在透明视图上放置高程，同样的事情也会发生。 - David Liu

谢谢，这个问题让我困扰了好久。你真是我的救星！ - Chukwuemeka Onyenezido

Answer 2

您可以添加背景颜色：backgroundColor: '#000';

一个非常方便的组件：

import React from 'react'
import { View, StyleSheet, ViewPropTypes } from 'react-native'
import PropTypes from 'prop-types'


const SingleSidedShadowCard = ({ children, style }) => (
    <View style={[ styles.container, style ]}>
        { children }
    </View>
);

const styles = StyleSheet.create({
    container:{
        overflow: 'hidden',
        paddingBottom: 5,
    }
});

SingleSidedShadowCard.propTypes = {
    children: PropTypes.element,
    style: ViewPropTypes.style,
};

export default SingleSidedShadowCard;

- Gammer