React Native:将阴影应用于视图外部而不应用于内部视图 [英] React Native: Apply shadow to outside of View and do not apply to inner views

问题描述

这是我的页面的样子

我试图只在红线所在的地方得到阴影

I am trying to get a shadow only where the red line is

我不希望内部元素有阴影，尤其是文本.我还希望阴影出现在视图下方.

I don't want shadow on the inner elements, especially not the text. I also want the shadow to appear below the View.

这就是我的视图样式

  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,

  },

<小时>

关于这个的答案解决方案不起作用或导致其他问题

---

Answers on this solution did not work or caused other problems

推荐答案

参见下面的示例，我为 ios 和 android 创建了一个 Shadow box.当涉及到ios"时，它有点棘手，我在下面的示例中清楚地表明了这一点.我想这会帮助你.

See below example which i created a Shadow box for both ios and android. Its a little bit tricky when it comes to 'ios' and i have clearly shown that in the example below. i think this will help you.

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;

根据您的要求更改此设置.如有任何疑问，请随时问我.

Change this according to your requirement. Feel free to ask me any doubts that you might have.

这篇关于React Native:将阴影应用于视图外部而不应用于内部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！