React-native тень не появляется на экранах приложений - PullRequest
Новая
       7

React-native тень не появляется на экранах приложений

0 голосов
/ 04 марта 2020

Я работаю над React-native App. Раньше тень работала нормально, но теперь во всем приложении тень не видна.

Я знаю, что в StackOverflow доступно так много вопросов и решений. Я перепробовал все, но у меня ничего не работает.

Я пытался добавить backgroundColor следующим образом: 

const styles = StyleSheet.create({
shadow: {
  shadowOffset: { width: 10, height: 10 },
  shadowColor: 'black',
  shadowOpacity: 1,
  elevation: 3,
  // background color must be set
  backgroundColor : "#0000" // invisible color
}

Я также удалил overflow: 'hidden';

Но не влияет на код.

Я использую elevation для android. И это не работает ни на одном из экранов приложения. Если кто-то сталкивается с той же проблемой, пожалуйста, поделитесь решением. ТИА

Ответы [ 2 ]

0 голосов
/ 04 марта 2020

Смотрите ниже пример, в котором я создал Shadow Box для ios и android. Я думаю, что это поможет вам. 

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;

Не стесняйтесь сомнений.

0 голосов
/ 04 марта 2020

Это сработало для меня 

   {
        paddingVertical: 12,
        marginTop: 20,
        marginBottom: 70,
        width: '100%',
        borderColor : 'gray', 
        borderWidth : 0.1,
        paddingHorizontal : 12,
        backgroundColor : '#fff',
        margin:8,
        width:'60%',
        alignItems : 'center',
        shadowOpacity: 0.25,
        shadowRadius: 2,
        shadowOffset: {
            width: 0,
            height: 2,
        },
        shadowColor: '#000000',
        elevation: 4,
    }
...