web-dev-qa-db-fra.com

React Native - Comment rendre la largeur de l’image 100% et la verticale en haut?

Je suis novice chez react-native . Ce que je veux faire, c'est adapter une image à l'appareil et conserver le ratio d'image. Simplement je veux faire width : 100%

J'ai cherché comment le faire et semble que resizeMode = 'contain' est bon pour cela.

Cependant, depuis que j'ai utilisé resizeMode = 'contain', l'image garde la position verticale centrée, ce que je ne veux pas ... Je veux qu'elle soit verticale en haut.

J'ai essayé d'utiliser un plug-in tel que react-native-fit-image mais pas de chance.

Et j'ai trouvé la raison pour laquelle l'image ne se redimension pas automatiquement . Mais je n'ai toujours aucune idée de la façon de le faire.

Donc, ma question est quel est le meilleur moyen de faire face à cette situation?

Dois-je mettre manuellement width, height taille chaque image?

Je voudrais :

  • Gardez le ratio de l'image.
  • Verticalement en haut position.

Réagir au code de test natif:

https://snack.expo.io/ry3_W53rW

Finalement ce que je veux faire:

https://jsfiddle.net/hadeath03/mb43awLr/

Merci.

react-nativeimage-resizing
13
Téwa

L'image est centrée verticalement, car vous avez ajouté flex: 1 à la propriété de style. N'ajoutez pas flex: 1, car l'image sera remplie par son parent, ce qui n'est pas souhaité dans ce cas.

Vous devez toujours ajouter une hauteur et une largeur à une image dans React Native. Si l'image est toujours la même, vous pouvez utiliser Dimensions.get('window').width pour calculer la taille de l'image. Par exemple, si le rapport est toujours 16x9, la hauteur correspond à 9/16e de la largeur de l'image. La largeur est égale à la largeur du périphérique, donc:

const dimensions = Dimensions.get('window');
const imageHeight = Math.round(dimensions.width * 9 / 16);
const imageWidth = dimensions.width;

return (
   <Image
     style={{ height: imageHeight, width: imageWidth }}
   />
);

Remarque: lorsque vous utilisez une telle implémentation, votre image ne sera pas automatiquement redimensionnée lors de la rotation de votre appareil, de l'utilisation d'un écran partagé, etc. Vous devrez également prendre en charge ces actions si vous prenez en charge plusieurs orientations ...

Si le rapport n'est pas le même, modifiez dynamiquement le 9/16 en fonction du rapport pour chaque image différente. Si vous ne vous inquiétez pas vraiment l'image est un peu recadrée, vous pouvez également utiliser le mode couverture avec une hauteur fixe: ( https://snack.expo.io/rk_NRnhHb )

<Image
  resizeMode={'cover'}
  style={{ width: '100%', height: 200 }}
  source={{uri: temp}}
/>
17
dejakob

Juste pour donner un coup de feu aussi

Vous pouvez également attendre le rappel Image onLayout pour obtenir ses propriétés de présentation et l'utiliser pour mettre à jour les dimensions. J'ai créé un composant pour cela:

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);
  };
}

Cela mettra à jour les dimensions de l'image pour correspondre à la largeur de l'écran.

2
gtRfnkN

Vous pouvez appliquer ce style à l’image: Si vous appliquez imageStyle à la balise Image, la largeur de l’image sera de 100% et la hauteur de l’image sera de 300.

imageStyle:{
height:300,
flex:1,
width:null
}

Supposons que votre code image soit:

<Image style={imageStyle} source={{uri:'uri of the Image'}} />
0
Muhammad Usman