Question

我正在尝试在React Native中构建一个简单的图像卡组件，但遇到了一些问题。现在是我的组件（It's available for you on snack）：

我无法找到一种方法来仅在卡片上图像的顶部设置边框，而使底部边框保持平坦。

所需格式：

“图片”组件不是从顶部渲染出来的，显示的是模型的脸，而是在居中显示了她的身体。

这是供比较的原始图像：

Answer 1

使用此代码。将overflow: "hidden"添加到View，并删除borderRadius的{{1}}。在IOS中测试。

Image

Answer 2

通过从<Image>移除高度并将其设置在其父视图中，图像将从顶部显示。

  <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
    <View style={{ backgroundColor: "#eee", borderRadius: 10, overflow: 'hidden' }}>
      <View style={{ height: 135, width: 155, overflow: 'hidden' }}>
        <Image
          source={require("./assets/h4.jpg")}
          style={{
            width: 155
          }}
        />
      </View>
      <View style={{ padding: 10, width: 155 }}>
        <Text>Title</Text>
        <Text style={{ color: "#777", paddingTop: 5 }}>
          Description of the image
        </Text>
      </View>
    </View>
  </View>

Answer 3

您可以直接在borderTopLeftRadius中使用borderTopRightRadius和Card来做到这一点。

<Card
    containerStyle={styles.boxCon}
    featuredTitle={title}
    image={{
      uri: urlToImage
    }}
    imageStyle={{ borderTopLeftRadius: 10, borderTopRightRadius: 10 }}
>

const styles = {
  boxCon: {
   margin: 15,
   marginHorizontal: 10,
   marginBottom: 17.5,
   borderColor: '#FFFFFF',
   shadowColor: '#000',
   shadowOffset: { width: 0, height: 2 },
   shadowOpacity: 0.3,
   shadowRadius: 5,
   elevation: 5,
   borderRadius: 10
  }
};

在React Native中构建图像卡

3 个答案: