Изображение React Native занимает все доступное вертикальное пространство

Question

Я новичок в реакции-нативе (начался 2 дня назад), но я быстро его подобрал, потому что уже знал регулярные реакции. Я пытаюсь написать приложение для реального мира и не могу понять, как правильно разместить изображение, я хочу, чтобы мой тег изображения занимал все горизонтальное пространство на экране, но я также хочу, чтобы он оставался на самом верху экрана и сохраняют его соотношение сторон (которое я не могу жестко кодировать, потому что я также буду отображать другие изображения номерных знаков, в том числе европейские, которые не имеют 2/1, как в Северной Америке), при этом фактическое изображение не будет занято все доступное вертикальное пространство.

Вот GIMP-редактирование того, что отображает мой код и что я на самом деле хочу: https://ibb.co/XJgrhkC

Вот моя функция рендеринга:

export default class App extends Component {
  ...

  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'flex-start', alignItems: 'center' }}>
        <Image
          source={require(`./resources/images/north_america/original/alaska.jpg`)}
          style={{ flex: 1, width: screenWidth }}
          resizeMode="contain" />
        <Button title="Random state" onPress={this.getRandomState} />
      </View>
    );
  }
}

Я знаком с вариантами компоновки css, но реагирующий-родной кажется другим, и я не могу обернуться вокруг всех комбинаций ширины, flex и resizeModes.

Answer 1

обычно, после применения flex к тегу <View />, содержащему <Image /> и <Button />, дочерние элементы родительского компонента будут иметь одинаковую flex пропу. Таким образом, вы можете удалить flex опору в <Image />.

Обратившись к <Image /> в Reaction-native в течение некоторого времени, я должен сказать, что указание значений для height и width важно для правильного отображения <Image />.

Вы можете попробовать это на моем примере Expo здесь .

  render() {
    return (
      <View style={{
        flex: 1,
        justifyContent: 'flex-start',
        alignItems: 'center'
      }}>
        <Image
          source={require(`./resources/images/north_america/original/alaska.jpg`)}
          style={{
            width: screenWidth,
            height: 200,
          }}
          resizeMode="contain"
        />
        <Button
          title="Random state"
          onPress={this.getRandomState}
        />
      </View>
    );
  }

также, так как вы новичок в реакции-нативном, могу ли я предложить вам изменить <Button /> на <TouchableOpacity />? он предоставляет визуальную помощь, когда пользователь нажимает его на мобильном устройстве.

Answer 2

Когда вы используете flex, вы можете видеть, что изображение автоматически занимает много места, когда вы добавляете {borderWidth: 2, borderColor: 'red'}. Вместо этого вы должны указать высоту вручную. Если вы хотите, чтобы он был правильно масштабирован, вы можете попробовать это:

import React from "react";
import { View, Image, Button, Dimensions } from "react-native";

class App extends React.Component {
  state = {
    imgWidth: 0,
    imgHeight: 0
  };

  componentDidMount() {
    Image.getSize("https://i.ibb.co/HgsfWpH/sc128.jpg", (width, height) => {
      // Calculate image width and height
      const screenWidth = Dimensions.get("window").width;
      const scaleFactor = width / screenWidth;
      const imageHeight = height / scaleFactor;
      this.setState({ imgWidth: screenWidth, imgHeight: imageHeight });
    });
  }
  render() {
    return (
      <View
        style={{ flex: 1, justifyContent: "flex-start", alignItems: "center" }}
      >
        <Image
          style={{
            flex: 1,
            width: Dimensions.get("window").width,
            borderColor: "red",
            borderWidth: 2
          }}
          source={{
            uri: "https://i.ibb.co/HgsfWpH/sc128.jpg"
          }}
          resizeMode="contain"
        />
        <Button title="Random state" onPress={this.getRandomState} />
      </View>
    );
  }
}

export default App;