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

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

0 голосов
/ 31 марта 2020

В моем приложении 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>
    );
  }
}

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

enter image description here

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

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

ПРИМЕЧАНИЕ:

Если я удаляю height: 100% на Image, я получаю это:

enter image description here

ОБНОВЛЕНИЕ:

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

enter image description here

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Существует разница между изображением (видом) и содержанием этого изображения. На вашем скриншоте вид изображения имеет черную рамку, а его содержимое находится внутри него. Поскольку они имеют различный формат rat ios, в них будет либо пробел, либо обрезание содержимого. Вы не можете регулировать положение контента, так как он не выложен на гибкой основе. Просмотр изображения - это просто окно, которое затем отображает содержимое изображения. Нет никакого свойства сообщать 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>
  );
};
0 голосов
/ 31 марта 2020

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

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