在React Native中构建映像卡

Question

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

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

所需形式：

• 看不到图像组件从显示模型面部的顶部渲染，而是显示她的身体居中。

这是比较的原始图像：

Answer 1

使用此代码。将overflow: "hidden"添加到View并删除borderRadius为Image。在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>
    );
  }
}

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>