React-native 阴影未出现在应用程序屏幕中答案

【问题标题】：React-native shadow not appearing in the app screensReact-native 阴影未出现在应用程序屏幕中
【发布时间】：2023-03-12 02:06:01
【问题描述】：

我正在开发 React-native 应用程序。之前阴影工作正常，但现在在整个应用程序中，阴影不可见。

我知道 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。它不适用于任何应用程序屏幕。如果有人遇到同样的问题，请分享解决方案。 TIA

【问题讨论】：

标签： javascript react-native react-native-android shadow

【解决方案1】：

这对我有用

   {
        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,
    }

【讨论】：

谢谢，但它在我的应用程序中不起作用。我认为整个应用程序的问题。它不适用于任何屏幕。早些时候它工作正常。
用这个ethercreative.github.io/react-native-shadow-generator尝试一次
是的，您的代码在其他应用程序中运行良好。但是在我的应用程序中，存在一些问题，这就是为什么海拔在应用程序的任何地方都不起作用的原因。关于为什么海拔不起作用的任何想法。

【解决方案2】：

请参阅下面的示例，我为 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;

请随时提出疑问。

【讨论】：

感谢您的回复。但它在我的应用程序中不起作用。