Question

尝试使用本机创建UI时，UI包含一个带外部阴影的框。使用我已经完成的图像，但是有没有正确的方法呢？

Answer 1

您将不得不为iOS和Android使用不同风格的道具。

Android

对于android非常简单，只需使用elevation样式道具（请参阅docs）。例子：

boxWithShadow: {
    elevation: 5
}

iOS

在iOS中，您具有更大的灵活性，请使用Shadow道具（请参见docs）。例子：

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
}

注意： 请勿使用overflow: 'hidden';，在iOS中，所有阴影都会通过此属性消失。

Answer 2

嘿，看看它现在就完成了！

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

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

Answer 3

我已经找到了解决线性相似问题的方法。我在堆栈上的任何地方都找不到更好的东西，所以我想在这里添加它。如果只需要顶部和底部或侧面阴影，则特别好用且容易。

我在全角和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
  }
}

如果使用expo，则可以使用'expo install expo-linear-gradient'Expo Docs进行安装。如果没有，我相信react-native-linear-gradient类似于React-Native-Linear-Gradient github。

在本机中创建带有框阴影的UI

3 个答案: