Réagir Natif - Comment faire de la largeur de l'image à 100% et vertical de haut?

Je suis novice à réagir indigènes.
Ce que je veux faire, c'est que l'ajustement d'une image dans l'appareil et de maintenir le ratio de l'image. Je veux simplement faire width : 100%

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

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

J'ai essayé d'utiliser un plug-in comme réagir-native-fit-image mais pas de chance.

Et j'ai trouvé la raison pour laquelle l'image n'est pas de dimensionnement automatiquement.
Mais encore, je n'ai aucune idée de comment le faire.

Donc, ma question est quelle est la meilleure façon de faire face à cette situation?

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

Je veux :

  • Garder l'image du rapport.
  • Verticalement de haut placé.

Réagir native code de test :

https://snack.expo.io/ry3_W53rW

Finalement ce que je veux faire :

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

Grâce.

Jetez un oeil à réagissent-native-évolutif-image
Merci pour cet article. Aussi, vous pouvez consulter l'article pour sensible de l'image : Réagir Natif Sensible de l'Image À l'Échelle pour correspondre Exemple — Android

OriginalL'auteur Téwa | 2017-07-19

  1. 18

    L'image est centrée verticalement, parce que vous avez ajouté flex: 1 à la propriété style. N'ajoutez pas de flex: 1, parce que cela va remplir l'image de son parent, qui n'est pas souhaité dans ce cas.

    Vous devriez toujours ajouter une hauteur et une largeur d'une image Réagir Natif. Dans le cas où 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 ratio est toujours 16x9, la hauteur est de 9/16ème de la largeur de l'image. La largeur de l'appareil est égale à la largeur, 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: Lors de l'utilisation d'une application comme cela, votre image ne sera pas redimensionner automatiquement lors de la rotation de votre appareil, à l'aide de l'écran divisé, etc. Vous aurez à prendre soin de ces actions ainsi si vous prenez en charge plusieurs orientations...

    Dans le cas où le rapport n'est pas la même, changer la dynamique du 9 /16 par le rapport pour chaque image. Si vous n'avez pas vraiment la peine de l'image est un peu recadrée, vous pouvez 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}}
/>
    Merci pour la réponse. Donc j'ai besoin de savoir la taille de l'image et utiliser des Dimensions afin de contrôler la taille de l'image.
    Dans votre expo exemple, pourquoi as-tu mis width: '100%' ? Je ne pense pas que ça fonctionne.
    100% fonctionne uniquement dans les versions plus récentes de Réagir Maternelle (à partir de 0,43 si je suis correctement)
    Merci pour cette . Aussi, vous pouvez consulter l'article pour sensible de l'image : Réagir Natif Sensible de l'Image À l'Échelle pour correspondre Exemple — Android

    OriginalL'auteur dejakob

  2. 2

    Juste pour donner un coup de cette ainsi

    Vous pouvez également attendre pour l'Image onLayout de rappel pour obtenir des propriétés de la structure et de l'utiliser pour mettre à jour les dimensions. J'ai créé un composant pour:

    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 permettra de mettre à jour les dimensions de l'image pour correspondre à la largeur de l'écran.

    OriginalL'auteur gtRfnkN

  3. 0

    Vous pouvez Appliquer ce style à l'image:
    Si vous appliquez imageStyle à la Image balise puis 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 vous de l'Image de Code est:

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

    OriginalL'auteur Muhammad Usman