React Native: применить тень к внешнему виду и не применять к внутренним представлениям. - PullRequest
Новая
       52

React Native: применить тень к внешнему виду и не применять к внутренним представлениям.

0 голосов
/ 23 февраля 2020

Вот так выглядит моя страница

enter image description here

Я пытаюсь получить тень только там, где красная линия

enter image description here

Мне не нужны тени на внутренних элементах, особенно на тексте. Я также хочу, чтобы тень отображалась под представлением.

Вот как я оформляю свое представление 

  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,

  },

Ответы на это решение не сработало или вызвал другие проблемы

1 Ответ

0 голосов
/ 23 февраля 2020

См. Ниже пример, в котором я создал Shadow Box для 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;

Измените это в соответствии с вашими требованиями. Не стесняйтесь задавать мне любые сомнения, которые у вас могут быть.

...