Построение имиджевой карты в React Native

Question

Я пытаюсь создать простой компонент с изображениями в React Native и у меня возникли некоторые проблемы. Это мой компонент сейчас ( Он доступен для вас на закуску ):

• Я не могу найти способ установить границу только в верхней части изображения на карте, оставляя нижнюю границу плоской.

Желаемая форма:

• Компонент Image не виден сверху, показывая лицо модели, вместо этого он центрируется, показывая ее тело.

Вот исходное изображение для сравнения:

Answer 1

Если удалить высоту из <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 2

Используйте этот код.Добавлен 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>
    );
  }
}