通过外部包在React Native中应用阴影 by alan eu

Question

我正在使用我下载的包将阴影应用到一个盒子上 https://github.com/alan-eu/react-native-fast-shadow 但我无法让阴影移动到物体的后面。

在这里我尝试应用阴影，如下所示。影子从盒子上方过来，而不是在盒子后面。

<ShadowedView style={{
  shadowOpacity: 0.1,
  shadowRadius: 12,
  shadowOffset: {
    width: -10,
    height: 0,
  }
}}>
          <View style={[styles.item, styles.card]}>
            <Text style={{fontWeight:600, color:"rgba(11, 88, 141, 1)"}}>text</Text>
            <View style={styles.bottomrow}>
              <Text style={{ paddingRight: 20 }}>text</Text>
              <Text style={{ color: "#FA0000" }}>text</Text>
            </View>
          </View>

</ShadowedView>

盒子背景的颜色是 RGBA(227, 234, 255, 0.3)

Answer 1

通常我使用此代码在 Android 和 ios 中应用阴影：

  elevation: 3; //this is only for Android
  background-color: #fff;
  shadow-color: rgba(227, 234, 255, 0.3);
  //try to play with these 3 shadow values bellow to adapt to your need
  shadow-offset: -2px 4px; 
  shadow-opacity: 0.2;
  shadow-radius: 3px;