React native 在react native中创建具有框阴影的UI

我试图在react native中创建一个UI，该UI包含一个带有外部阴影的框。用这个图像我已经做到了，但是有没有合适的方法呢

---

嘿，看，现在都做完了

const styles = StyleSheet.create({
    shadow: {  
        borderColor:'yourchoice', // if you need 
        borderWidth:1,
        overflow: 'hidden',
        shadowColor: 'yourchoice',
        shadowRadius: 10,
        shadowOpacity: 1,
    }
});

---

请记住，阴影道具仅适用于IOS。

您必须为IOS和Android使用不同风格的道具

Android

android非常简单，只需使用

elevation

样式道具（请参阅）。例如：

boxWithShadow: {
    elevation: 5
}

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

iOS

在iOS中，您可以更灵活地使用阴影道具（请参阅）。例如：

boxWithShadow: {
    elevation: 5
}

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 1,  
}

摘要

总之，要获得两种平台的方块阴影，请使用两套样式道具：

boxWithShadow: {
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 1 },
    shadowOpacity: 0.8,
    shadowRadius: 2,  
    elevation: 5
}

---

注意：不要使用

溢出：“隐藏”

，在

iOS

中，所有阴影都会因此属性而消失。

我发现了一个解决方法，使用线性渐变解决了一个非常类似的问题。我在堆栈的任何地方都找不到更好的，所以我想我会把它添加到这里。如果你只想要顶部和底部，或者侧面阴影，这将是非常好和容易的

我将顶部和底部的内框阴影添加到一个全宽140高的图像中。可以创建多个渐变以形成外框阴影。别忘了角落。你可以使用“开始”和“结束”道具来制作有角度的阴影/渐变，如果你需要的话，这可能适用于拐角

<ImageBackground
  source={imagePicker(this.props.title)}
  style={styles.image}
>
  <LinearGradient 
    colors={[
      'transparent',
      'transparent',
      'rgba(0,0,0,0.2)',
      'rgba(0,0,0,0.6)'
    ]}
    start={[0,0.9]}
    end={[0,1]}
    style={styles.image_shadows}
  />
  <LinearGradient 
    colors={[
      'rgba(0,0,0,0.6)',
      'rgba(0,0,0,0.2)',
      'transparent',
      'transparent'
    ]}
    start={[0,0]}
    end={[0,0.1]}
    style={styles.image_cover}
  />
</ImageBackground>



const styles = StyleSheet.create({
  image: {
    flex: 1,
    resizeMode: "stretch",
    justifyContent: "center",
    paddingTop:90,
    paddingLeft:10,
    height:140,
    flexDirection: 'row',
  },
  image_shadows: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    height: 140
  }
}

const styles=StyleSheet.create({
图片：{
弹性：1，
resizeMode：“拉伸”，
辩护内容：“中心”，
paddingTop:90，
paddingLeft:10，
身高：140，
flexDirection:'行'，
},
图像阴影：{
位置：'绝对'，
左:0,，
右:0,，
排名：0，
身高：140
}
}

---

如果你使用expo，你可以使用“expo安装expo线性渐变”来安装它。如果没有，我相信react native linear gradient是类似的。

阴影的道具只在IOS上可用。这个答案只适用于IOS上的

和
溢出：“hidden”；
消除所有阴影，所以如果你想看到所有阴影，请忽略
overflow:'hidden'；
。有没有办法在Android中自定义阴影道具？我认为你不能在Android中自定义。使用backgroundColor:“#fff”在iOS上，这会在该框的所有子元素上添加阴影，Lol如何只在底部设置框阴影？