在 React Native 中构建图像卡

Posted 2023-02-23

【中文标题】在 React Native 中构建图像卡

【英文标题】：Building Image Card in React Native

【发布时间】：2019-08-16 11:26:03

【问题描述】：

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

我找不到只在卡片上的图像顶部设置边框，同时保持底部边框平整的方法。

所需形式：

Image 组件没有看到从顶部呈现模型的脸，而是居中显示她的身体。

这是用于比较的原始图像：

【参考方案1】：

使用此代码。在View 中添加了overflow: "hidden"，并为Image 删除了borderRadius。在ios中测试。

import * as React from 'react';
import  Text, View, Image  from "react-native";


export default class RootComponent extends React.Component 

  render() 
    return (
      <View style= flex: 1, alignItems: "center", justifyContent: "center" >
        <View style= backgroundColor: "#eee", borderRadius: 10, overflow: "hidden" >
          <View>
            <Image
              source=require("./assets/h4.jpg")
              style=
                height: 135,
                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>
    );
  

【参考方案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>

【讨论】：

因为一个问题里面有两个问题，所以我选择了第一个发布是正确的。但这也是正确的，因为它会从顶部渲染图像。谢谢！

【参考方案3】：

您可以直接在Card 中使用borderTopLeftRadius 和borderTopRightRadius。

<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
  
;