web-dev-qa-db-fra.com

Redimensionnement de l'image dans React Native

J'essaie de redimensionner une image (plus petite pour l'écran) dans mon application native, mais je suis incapable de le faire car elle est trop grande.

Voici le code:

'use strict';

var React = require('react-native');
var {
  StyleSheet,
  Text,
  TextInput,
  View,
  TouchableHighlight,
  ActivityIndicatorIOS,
  Image,
  Component
} = React;

var styles = StyleSheet.create({
  description: {
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  },
  container: {
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  },
  flowRight: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch'
  },
  buttonText: {
    fontSize: 18,
    color: 'white',
    alignSelf: 'center'
  },
  button: {
    height: 36,
    flex: 1,
    flexDirection: 'row',
    backgroundColor: '#48BBEC',
    borderColor: '#48BBEC',
    borderWidth: 1,
    borderRadius: 8,
    marginBottom: 10,
    alignSelf: 'stretch',
    justifyContent: 'center'
  },
  searchInput: {
    height: 36,
    padding: 4,
    marginRight: 5,
    flex: 4,
    fontSize: 18,
    borderWidth: 1,
    borderColor: '#48BBEC',
    borderRadius: 8,
    color: '#48BBEC'
  },
  image: {
    width: 200,
    height: 220
  },
});

class SearchPage extends Component {
  render() {
    return (
      <View style={styles.container}>

        <Image source={require('image!rclogo')} style={styles.image}/>

        <Text style={styles.description}>
          Search for RCers!
        </Text>

        <Text style={styles.description}>
          Search
        </Text>

        <View style={styles.flowRight}>
          <TextInput
            style={styles.searchInput}
            placeholder='Search by Batch, Name, Interest...'/>
          <TouchableHighlight style={styles.button}
              underlayColor='#99d9f4'>
            <Text style={styles.buttonText}>Go</Text>
          </TouchableHighlight>
        </View>

        <TouchableHighlight style={styles.button}
            underlayColor='#99d9f4'>
          <Text style={styles.buttonText}>Location</Text>
        </TouchableHighlight>

      </View>
    );
  }
}

J'ai essayé de le sortir de la balise de conteneur mais je n'arrive pas à comprendre pourquoi il ne restituera pas correctement?

Cela peut-il être fait avec flexbox resizeMode? Comment faites-vous? Je ne trouve aucun document dessus ...

javascriptreactjsreact-native
40
rahul2001

l'image corrige automatiquement la vue

image: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
}
59
shixukai

J'ajuste un peu ta réponse (shixukai)

image: {
    flex: 1,
    width: 50,
    height: 50,
    resizeMode: 'contain' }

Lorsque j'ai la valeur null, l'image ne s'affiche pas du tout. J'ai mis à certaine taille comme 50

36
Apit John Ismail

Cela a fonctionné pour moi:

image: {
    flex: 1,
    aspectRatio: 1.5, 
    resizeMode: 'contain',

  }

aspectRatio est juste largeur/hauteur (mon image est 45px large x 30px haut).

20
GenericJam

Couru dans le même problème et était capable de Tweak le mode Redimensionner jusqu'à ce que j'ai trouvé quelque chose que je suis heureux avec. Les approches alternatives incluent:

  • Réduisez la taille de la ressource statique à l'aide d'un éditeur d'image
  • Ajouter une bordure transparente à la ressource statique à l'aide d'un éditeur d'image
  • Utilisez une ressource réseau au détriment de l'UX

Pour éviter toute perte de qualité lorsque vous peaufinez des images, envisagez de travailler avec des graphiques vectoriels pour pouvoir expérimenter facilement différentes tailles. Inkscape est un outil gratuit et fonctionne bien à cette fin.

8
Josh Habdas

Après avoir essayé quelques combinaisons, cela fonctionne comme ceci:

image: {
    width: null,
    resizeMode: 'contain',
    height: 220
}

Plus précisément dans cet ordre… J'espère que cela peut être utile à quelqu'un. (Je sais que c'est une vieille question)

7
Henry Tiquet Leyva

Cela a fonctionné pour moi:

image: {
  flex: 1,
  width: 900,
  height: 900,
  resizeMode: 'contain'
}

Assurez-vous simplement que la largeur et la hauteur sont plus grandes que nécessaire, car elles se limitent à ce que vous définissez.

3
Jamie Hall

Cela a fonctionné pour moi

image: {
    width: 200,
    height:220,
    resizeMode: 'cover'
}

Vous pouvez également définir votre resizeMode: 'contain'. J'ai défini le style de mes images réseau comme suit:

<Image 
   source={{uri:rowData.banner_path}}
   style={{
     width: 80,
     height: 80,
     marginRight: 10,
     marginBottom: 12,
     marginTop: 12}}
/>

Si vous utilisez flex, utilisez-le dans tous les composants de la vue parent, sinon, il est redondant avec height: 200, width: 220.

2
Анураг Пракаш

Utilisez Resizemode avec 'couverture' ou 'contenir' et définissez la hauteur et avec de l'image.

2
Pramod Mg

Dans mon cas, je ne pouvais pas définir "width" et "height" sur null car j'utilise TypeScript.

La façon dont j'ai corrigé le problème était de les régler sur '100%':

backgroundImage: {
    flex: 1,
    width: '100%',
    height: '100%',
    resizeMode: 'cover',        
}
0
Felipe Braz