Question

我试图在本机视图周围显示阴影。

我尝试过

<View style={{
        flex: 0.3,
        margin:4

        ...Platform.select({
            ios: {
                shadowColor: '#000',
                shadowOffset: { width: 0, height: 4 },
                shadowOpacity: 0.4,
            },
            android: {
                elevation: 2
            },
        }),

    }}>

 Hello Shadow 

</View>

它在iOs上完美运行，但在android上则无效。有一个名为react-native-shadow的库，可以在iOs和android上完美运行，但是如何在不使用任何第三方库的情况下解决android中的阴影问题。

Answer 1

现在我拥有这些属性，这些属性已经为所需的动画提供了解决方法。尝试此操作，然后在注释中知道是否可以帮助您解决问题。很乐意提供帮助。

   ...Platform.select({
            ios: {
                shadowColor: '#000',
                shadowOffset: { width: 0, height: 3 },
                shadowOpacity: 0.2,
            },
            android: {
                elevation: 0.4,
                // bottomElevation:4,
                borderBottomWidth: 0.2,
                borderTopWidth:0.2,
                borderColor:'#000'

            },
        }),

Answer 2

目前，我使用以下属性来处理 IOS 和 Android 平台上的阴影。

<View
  style={{
      height: 200,
      width: 350,
      borderRadius: 4,
      margin: 5,
      shadowColor: 'rgba(0,0,0,0.5)',
      shadowOffset: {width: 0, height: 5},
      shadowOpacity: 2,
      shadowRadius: 2,
      elevation: 4,
      backgroundColor: '#fff',
  }}>

如何在Android的React-Native中修复高程阴影问题

2 个答案: