React Native：将阴影应用于View的外部，而不应用于内部View

Question

这是我的页面外观

我试图仅在红线所在的地方获得阴影

我不想在内部元素上留下阴影，尤其是文本。我也希望阴影出现在“视图”下方。

这就是我设计视图的方式

  myOuterView: {
    borderWidth: 1,
    borderRadius: 2,
    borderColor: '#ddd',
    borderBottomWidth: 0,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,
    elevation: 1,
    marginLeft: 5,
    marginRight: 5,
    marginTop: 10,

  },

---

this solution上的答案无效或引起了其他问题

Answer 1

请参见下面的示例，我为ios和android创建了一个阴影框。当涉及到“ ios”时，它有点棘手，我在下面的示例中清楚地表明了这一点。我认为这会对您有所帮助。

import React, { Component } from 'react';
import { View, Text, Dimensions, Platform } from 'react-native';

const screenHieght = Dimensions.get('window').height;
class ShadowBox extends Component {
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>

        <View style={styles.innerView}>
          <View style={styles.outer}>
            <Text style={{ textAlign: 'center' }}>card </Text>
          </View>
          <View style={styles.outer}>
            <Text style={{ textAlign: 'center' }}>card </Text>
          </View>
        </View>

      </View>
    );
  }
}

const styles = {
  innerView: {
    borderWidth: 1,
    backgroundColor: Platform.OS === 'ios' ? '#fff' : null,
    borderColor: '#ddd',
    shadowColor: Platform.OS === 'ios' ? 'green' : '#fff',
    shadowOffset: {
      width: Platform.OS === 'ios' ? 3 : 0,
      height: Platform.OS === 'ios' ? 3 : 2,
    },
    shadowOpacity: Platform.OS === 'ios' ? 1 : 0.8,
    shadowRadius: Platform.OS === 'ios' ? null : 40,
    elevation: Platform.OS === 'ios' ? null : 4,
    justifyContent: 'center',
    alignItems: 'center',
    width: 300,
    height: 300,
  },
  outer: {
    margin: 10,
    padding: 10,
    alignSelf: 'center',
    borderWidth: 1,
    width: '80%',
    overflow: 'hidden',
  },
};

export default ShadowBox;

根据您的要求进行更改。随时问我您可能有什么疑问。

Answer 2

创建Shadow.js

export const Shadow = (elevation) => { // Receive elevation as a prop
  return {
    elevation,
    shadowColor: 'black',
    shadowOffset: { width: 0, height: 0.5 * elevation },
    shadowOpacity: 0.3,
    shadowRadius: 0.8 * elevation,
  };
};

将Shadow.js导入到要应用的页面中

import Shadow from './Shadow'  //path to Shadow.js

<View style={{Shadow(5)}}> // pass elevation as a prop to Shadow.js
</View>

如果您想使用样式

import Shadow from './Shadow'  //path to Shadow.js

<View style={styles.shadow}>
</View>

const styles = StyleSheet.create({
 shadow:{
    ...Shadow(5) //use spread operator
}
});