React Native - как сделать изображение шириной 100 процентов и вертикальной вершиной?

Question

React Native - как сделать изображение шириной 100 процентов и вертикальной вершиной?

Я новичок в react-native.
То, что я хочу сделать, - это поместить изображение в устройство и сохранить соотношение изображения. Просто я хочу сделать width : 100%

Я искал, как это сделать, и, кажется, resizeMode = 'contain' хорошо для этого.

Однако, поскольку я использовал resizeMode = 'contain', изображение сохраняет положение по вертикали, которое мне не нужно.
Я хочу, чтобы он был вертикально сверху.

Я попытался использовать плагин, такой как react-native-fit-image, но безуспешно.

И я нашел причину, по которой изображение не изменяется автоматически .
Но все равно я понятия не имею, как это сделать.

Итак, мой вопрос заключается в том, как лучше всего справиться с этой ситуацией?

Должен ли я вручную ставить width, height размер каждого изображения?

Я хочу :

сохраняйте соотношение изображений.

вертикально сверху расположен.

React native test code:

Https://snack.expo.io/ry3_W53rW

В конце концов, что я хочу сделать :

Https://jsfiddle.net/hadeath03/mb43awLr/

Спасибо.

1146 3

react-native

3 ответов:

Comments

Ничего не найдено.

dejakob · Accepted Answer · 2018-03-08 00:00:58

Изображение имеет вертикальный центр, так как вы добавили flex: 1 в свойство style. Не добавляйте flex: 1, потому что это заполнит изображение до его родителя, что в данном случае нежелательно.

Вы всегда должны добавлять высоту и ширину изображения в React Native. В случае, если изображение всегда одно и то же, вы можете использовать Dimensions.get('window').width для вычисления размера изображения. Например, если отношение всегда 16x9, высота составляет 9/16 ширины изображения. Ширина равна ширине устройства, Итак:
const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

return (
   <Image
     style={{ height: imageHeight, width: imageWidth }}
   />
);
Примечание: при использовании подобной реализации изображение не будет автоматически изменяться при вращении устройства, использовании разделенного экрана и т. д. Вам также придется позаботиться об этих действиях, если вы поддерживаете несколько ориентаций...

В случае, если соотношение не совпадает, динамически измените соотношение 9 / 16 для каждого другого изображения. Если вы действительно не беспокоитесь, что изображение немного обрезано, вы можете использовать режим обложки с фиксированной высотой: (https://snack.expo.io/rk_NRnhHb )
<Image
  resizeMode={'cover'}
  style={{ width: '100%', height: 200 }}
  source={{uri: temp}}
/>

gtRfnkN · Accepted Answer · 2018-03-07 20:31:28

Просто чтобы дать этому шанс, а также

Вы также можете дождаться обратного вызова Image onLayout, чтобы получить свойства макета и использовать их для обновления размеров. Я создал компонент для этого:
import * as React from 'react';
import { Dimensions, Image, ImageProperties, LayoutChangeEvent, StyleSheet, ViewStyle } from 'react-native';

export interface FullWidthImageState {
  width: number;
  height: number;
  stretched: boolean;
}

export default class FullWidthImage extends React.Component<ImageProperties, FullWidthImageState> {
  constructor(props: ImageProperties) {
    super(props);

    this.state = { width: 100, height: 100, stretched: false };
  }

  render() {
    return <Image {...this.props} style={this.getStyle()} onLayout={this.resizeImage} />;
  }

  private resizeImage = (event: LayoutChangeEvent) => {
    if (!this.state.stretched) {
      const width = Dimensions.get('window').width;
      const height = width * event.nativeEvent.layout.height / event.nativeEvent.layout.width;
      this.setState({ width, height, stretched: true });
    }
  };

  private getStyle = (): ViewStyle => {
    const style = [StyleSheet.flatten(this.props.style)];
    style.push({ width: this.state.width, height: this.state.height });
    return StyleSheet.flatten(style);
  };
}
Это позволит обновить размеры изображения в соответствии с шириной экрана.

Muhammad Usman · Accepted Answer · 2018-05-26 11:18:44

Вы можете применить этот стиль к изображению: Если применить imageStyle к тегу Image, то ширина изображения будет равна 100%, а высота-300.
imageStyle:{
height:300,
flex:1,
width:null
}
Предположим, что код вашего изображения:
<Image style={imageStyle} source={{uri:'uri of the Image'}} />