Reactjs 在React Native中构建图像卡

我试图在React Native中构建一个简单的图像卡组件，但遇到了一些问题。这是我现在的组件（）：

• 我找不到一种方法只在卡片图像的顶部设置边框，使底部边框保持平坦

所需表格：

• 图像组件并不是从顶部显示模型的脸，而是居中显示她的身体

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

---

使用此代码。在

视图中添加了
溢出：“隐藏”
，并删除了
图像的
边界半径。在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>
    );
  }
}

import*as React from'React'；
从“react native”导入{文本、视图、图像}；
导出默认类RootComponent扩展React.Component{
render（）{
返回(
标题
图像的描述
);
}
}
通过移除
的高度并将其设置在其父视图中，图像将从顶部显示

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


标题
图像的描述
您可以直接使用
卡中的
borderTopLeftRadius
和
bordertoprirtradius
执行此操作

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


常量样式={
博克斯康：{
差额：15，
marginHorizontal:10，
marginBottom:17.5，
边框颜色：'#FFFFFF'，
阴影颜色：“#000”，
阴影偏移：{宽度：0，高度：2}，
阴影不透明度：0.3，
阴影半径：5，
标高：5，
边界半径：10
}
};
因为这是一个问题中的两个问题，所以我选择了第一个发布的问题作为正确答案。但这也是正确的，因为它将从顶部渲染图像。非常感谢。