Bildgrößenänderung in React Native

Lesezeit: 4 Minuten

Benutzer-Avatar
raul2001

Ich versuche, die Größe eines Bildes (kleiner an den Bildschirm anzupassen) in meiner reagierenden nativen App zu ändern, kann dies jedoch nicht tun, da es zu groß ist.

Hier ist der 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>
    );
  }
} 

Ich habe versucht, es aus dem Container-Tag zu entfernen, kann aber anscheinend nicht verstehen, warum es nicht richtig gerendert wird?

Geht das mit flexbox resizeMode? Wie machst du das? Ich finde keine Doku dazu…

  • Das sollte funktionieren. Passiert nichts, wenn ich die Breite auf 100 ändere? Schau auch mal rein github.com/facebook/react-native/blob/master/Libraries/Image/… für mehr Einblick in verfügbare Attribute.

    – Brad Oyler

    8. April 2015 um 1:58 Uhr

  • Hast du versucht resizeMode: 'cover' ?

    – amit

    30. April 2015 um 10:02 Uhr

  • ja nichts passiert mit resizeMode: 'cover' .

    – Piyush Chauhan

    9. Juni 2015 um 1:55 Uhr

  • npmjs.com/package/react-native-scalable-image

    – Ihor Burlachenko

    9. September 2017 um 20:36 Uhr

  • mögliches Duplikat von stackoverflow.com/questions/45187785/…

    – Archimedes Trajano

    25. Juli 2021 um 23:58 Uhr

Bild automatisch die Ansicht korrigieren

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

  • Dadurch ist mein Bild verschwunden? 🤔

    – Karl Taylor

    12. März 2018 um 17:07 Uhr

  • Das Bild muss sich in einem Wrapping-Container wie View befinden. Irgendwann müssen Sie eine Größe angeben….

    – Lukas

    9. April 2018 um 3:06 Uhr

  • Wenn Sie Typescript verwenden, versuchen Sie es width: undefined und height: undefined stattdessen um Tippfehler zu vermeiden.

    – Blindbox

    30. April 2020 um 14:14 Uhr


  • Das hat bei mir in React Native funktioniert. Obwohl ich resizeMode auf ‘cover’ geändert habe. Dies füllte den gesamten Bildschirm mit dem Bild.

    – NightTom

    5. Juni 2020 um 11:56 Uhr


  • Dies ist die perfekte Antwort. Ich denke, diese Methode ist besser für Bilder, die größer sind als die Ansicht.

    – Dami

    20. Januar 2021 um 14:38 Uhr

Ich passe deine Antwort ein wenig an (shixukai)

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

Wenn ich auf null setze, wird das Bild überhaupt nicht angezeigt. Ich habe eine bestimmte Größe wie 50 eingestellt

Das hat bei mir funktioniert:

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

  }

Aspektverhältnis ist nur Breite/Höhe (mein Bild ist 45 Pixel breit x 30 Pixel hoch).

  • Danke, das ist die einzige Lösung, die bei mir funktioniert hat. Ich hatte Bilder mit flexibler Breite und Höhe (begrenzt durch den Bildschirm) und bis ich das Aspektverhältnis hinzufügte, wurde nur die Höhe richtig dimensioniert und die Breite war die Quellbildbreite (obwohl das übergeordnete Element alignItems: ‘stretch’ hatte). .

    – Onyxit

    21. Juni 2018 um 19:05 Uhr

  • Dies ist die beste Lösung. Das einzige was bei mir funktioniert hat.

    – Stuart

    5. März 2019 um 13:56 Uhr

  • Wie können Sie dabei einen Rahmen um das Bild legen? Es entsteht eine große Menge an Weißraum auf beiden Seiten.

    – kojow7

    31. Januar 2020 um 4:28 Uhr


Nachdem ich einige Kombinationen ausprobiert habe, funktioniert das so:

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

Genauer gesagt in dieser Reihenfolge. Ich hoffe, das kann für jemanden hilfreich sein. (Ich weiß, das ist eine alte Frage)

Benutzer-Avatar
Sunil Tako

Versuchen Sie Folgendes: (für weitere Details Klick hier)

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

Benutzer-Avatar
ein weiterer Knoten

Das hat bei mir funktioniert:

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

Sie müssen nur sicherstellen, dass die Breite und Höhe größer sind als Sie benötigen, da sie auf das beschränkt sind, was Sie einstellen.

Lief auf das gleiche Problem und konnte das optimieren Größenänderungsmodus bis ich etwas fand, mit dem ich zufrieden war. Alternative Ansätze umfassen:

  • Reduzieren Sie die Größe der Statische Ressource mit einem Bildbearbeitungsprogramm
  • Fügen Sie der statischen Ressource mithilfe eines Bildeditors einen transparenten Rahmen hinzu
  • Verwenden ein Netzwerkressource auf Kosten von UX

Um Qualitätsverluste beim Optimieren von Bildern zu vermeiden, sollten Sie mit Vektorgrafiken arbeiten, damit Sie problemlos mit verschiedenen Größen experimentieren können. Inkscape ist ein kostenloses Tool und eignet sich gut für diesen Zweck.

1186150cookie-checkBildgrößenänderung in React Native

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy