React Native: почему изображение растягивается по вертикали, чтобы заполнить контейнер, и как этого избежать?

В моем приложении React Native у меня есть красный прямоугольник высотой 300, который я хочу центрировать по вертикали, и изображение, которое я хочу разместить внутри и вверху этого красного прямоугольника. Вот мой код:

import React, { Component } from 'react';
import { View, Image} from 'react-native';

export default class Login extends Component {
  render() {
    return (
      <View style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}>
          <View
            style={{
              borderWidth: 3,
              borderColor: 'red',
              width: "100%",
              height: 300
            }}
          >
            <Image
              source={require('../../images/swoord-top.png')}
              style={{
                width: "100%",
                height: "100%",
                resizeMode: "contain",
                borderWidth: 3
              }}
              >
            </Image>
          </View>
      </View>
    );
  }
}

Вот как это выглядит:

введите здесь описание изображения

Красное поле — это внешнее поле, о котором я упоминал, а черное поле — это просто граница Image. Проблема в том, что этот черный ящик (то есть Image) расширяется, чтобы заполнить красный ящик по вертикали, а изображение центрировано по вертикали внутри этого черного ящика, поэтому оно вертикально центрировано внутри красного поля, а не в позиции flex-start, которую я хочу это при. Я пробовал добавлять justifyContent: flex-start и flexShrink: 1 к Image, но ничего не изменилось.

Кто-нибудь знает, как я могу подойти к этому?

ПРИМЕЧАНИЕ:

Если я уберу height: 100% на Image, я получу это:

введите здесь описание изображения

ОБНОВЛЕНИЕ:

Чтобы уточнить, это то, что я хотел бы, чтобы это выглядело. Я удалил черную рамку здесь. Я переместил его туда, где мне нужно, добавив top: -95, но в целом это не сработает, потому что значение будет разным для разных устройств:

введите здесь описание изображения


react-native reactjs react-native-image
person gkeenley    schedule 31.03.2020    source источник
comment
Можете ли вы показать нам изображение, на котором мы можем увидеть, чего вы пытаетесь достичь?   -  person Tim    schedule 31.03.2020

Ответы (2)


arrow_upward
0
arrow_downward

попробуй сделать вот так

 <Image
              source={require('../../images/swoord-top.png')}
              style={{
                width: "100%",
                borderWidth: 3
              }}
              resizeMode={"contain"}
              />

person Neelam Soni    schedule 31.03.2020
comment
Привет, Нилам, к сожалению, без разницы. - person gkeenley; 31.03.2020
comment
удалите высоту для изображения и попробуйте - person Neelam Soni; 31.03.2020
comment
см. мое ПРИМЕЧАНИЕ: в исходном сообщении - person gkeenley; 31.03.2020

arrow_upward
0
arrow_downward

Существует разница между изображением (представлением) и содержимым этого изображения. На вашем снимке экрана представление изображения имеет черную рамку, а его содержимое находится внутри него. Поскольку они имеют разное соотношение сторон, контент будет либо пустым, либо обрезанным. Вы не можете настроить положение контента, так как он не выложен на гибкой основе. Представление изображения — это просто окно, которое затем отображает содержимое изображения. Нет свойства, чтобы указать Image, где выровнять этот контент

Ваша проблема связана с тем, что ширина экрана отличается, а соотношение сторон вашего контейнера также отличается (переменная ширина, но постоянная высота 300). Что вам нужно сделать, это

  1. измерить ширину контейнера
  2. определить правильное соотношение сторон для изображения на основе ширины и высоты ресурса изображения
  3. установите ширину изображения на 100% и его высоту в соответствии с полученным соотношением сторон

здесь размеры моего изображения 1005 * 219:

const Test = () => {
  const [width, setWidth] = useState(0);
  return (
    <View>
      <View
        onLayout={e => setWidth(e.nativeEvent.layout.width)}
        style={{ width: '100%', height: 300, borderWidth: 1 }}>
        <Image
          style={{
            width: '100%',
            height: (width / 1005) * 219,
            borderWidth: 1,
            borderColor: 'red',
          }}
          source={require('...')}
        />
      </View>
    </View>
  );
};
person Max    schedule 31.03.2020