Bildgrößenänderung in React Native

74

Ich versuche, die Größe eines Bilds (kleiner, um auf den Bildschirm zu passen) in meiner nativen App zu ändern, kann dies jedoch nicht, 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 nicht verstehen, warum es nicht richtig gerendert wird.

Kann dies mit flexbox resizeMode durchgeführt werden? Wie machst du das? Ich kann keine Dokumente darauf finden ...

rahul2001
quelle
Das sollte funktionieren. Passiert nichts, wenn die Breite auf 100 geändert wird? Weitere Informationen zu verfügbaren Attributen finden Sie auch unter github.com/facebook/react-native/blob/master/Libraries/Image/… .
Brad Oyler
Hast du es versucht resizeMode: 'cover'?
Amit
Ja, nichts passiert mit resizeMode: 'cover'.
Piyush Chauhan

Antworten:

113

Bild automatisch die Ansicht korrigieren

image: {
    flex: 1,
    width: null,
    height: null,
    resizeMode: 'contain'
}
Shixukai
quelle
35
Dadurch verschwand mein Bild? 🤔
Karl Taylor
2
Das Bild muss sich in einem Verpackungscontainer wie einer Ansicht befinden. Irgendwann müssen Sie eine Größe angeben ...
Luke
Wenn Sie auf Typoskript, versuchen width: undefinedund height: undefinedstattdessen Art Fehler zu vermeiden.
Blindbox
Dies hat bei mir in React Native funktioniert. Obwohl ich resizeMode in 'cover' geändert habe. Dies füllte den gesamten Bildschirm mit dem Bild.
Tom
1
hat bei mir nicht funktioniert und mein Bild ist verschwunden
Vikas Kandari
50

Ich passe deine Antwort ein bisschen 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

Apit John Ismail
quelle
38

Das hat bei mir funktioniert:

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

  }

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

GenericJam
quelle
Vielen Dank, dies ist die einzige Lösung, die für mich funktioniert hat. Ich hatte Bilder mit einer flexiblen Breite und Höhe (durch den Bildschirm begrenzt) und bis ich aspectRatio hinzufügte, wurde nur die Höhe richtig dimensioniert und die Breite war die Breite des Quellbilds (obwohl das übergeordnete Element alignItems hatte: 'strecken') .
Onyxite
Dies ist die beste Lösung. Der einzige, der für mich gearbeitet hat.
Stuart
Wie können Sie dabei einen Rahmen um das Bild legen? Es entsteht auf beiden Seiten eine große Menge an Leerraum.
kojow7
13

Nachdem ich einige Kombinationen ausprobiert habe, funktioniert dies folgendermaßen:

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

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

Henry Tiquet Leyva
quelle
1
Es hat bei mir aber ohne funktioniert width: null. Vielen Dank!
dazs
10

Das hat bei mir funktioniert:

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

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

Jamie Hall
quelle
8

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

  • Reduzieren Sie die Größe der statischen Ressource mit einem Bildeditor
  • Fügen Sie der statischen Ressource mit einem Bildeditor einen transparenten Rand hinzu
  • Verwenden Sie eine 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 funktioniert gut für diesen Zweck.

Josh Habdas
quelle
6

In meinem Fall konnte ich 'width' und 'height' nicht auf null setzen, da ich TypeScript verwende.

Ich habe es so behoben, indem ich sie auf "100%" gesetzt habe:

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

Versuchen Sie Folgendes: (Für weitere Informationen klicken Sie hier )

image: { flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }
Sunil Tako
quelle
5

Das hat bei mir funktioniert,

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

Sie können auch Ihre einstellen resizeMode: 'contain'. Ich habe den Stil für meine Netzwerkbilder wie folgt definiert:

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

Wenn Sie Flex verwenden, verwenden Sie es in allen Komponenten der übergeordneten Ansicht, andernfalls ist es redundant mit height: 200, width: 220.

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

Verwenden Sie den Größenmodus mit 'Abdeckung' oder 'Enthalten' und stellen Sie die Höhe und mit des Bildes ein.

Pramod Mg
quelle
1

{ flex: 1, resizeMode: 'contain' }arbeitete für mich. Ich brauchte das Aspektverhältnis nicht

Moazzam Khan
quelle
1

Hey, dein Bild reaktionsschnell zu machen ist einfach: Hier ist ein Artikel, den ich darüber geschrieben habe. https://medium.com/@ashirazee/react-native-simple-responsive-images-for-all-screen-sizes-with-flex-69f8a96dbc6f

Sie können dies einfach tun und es wird skaliert

container: {
    width: 200,
    height: 220
  },// container holding your image 


  image: {
    width: '100%',
    height: '100%',
    resizeMode: cover,
  },
});

Dies liegt daran, dass der Container, in dem sich das Bild befindet, die Höhe und Breite bestimmt. Wenn Sie also Prozentsätze verwenden, können Sie Ihr Bild an alle Bildschirmgrößen anpassen.

Hier ist ein weiteres Beispiel:

<View style={{
width: 180,
height: 200,
aspectRatio: 1 * 1.4,
}}>
<Image
source={{uri : item.image.url}}
style={{
resizeMode:cover’,
width:100%’,
height:100%’
}}
/>
</View>

Ali Shirazee
quelle
0

** Nach der Breite einstellen und die Höhe des Bildes verwendet dann die resizeMode Eigenschaft , indem Sie sich von normalen abzudecken oder contain.The folgenden Codeblocks übersetzen CSS zu reagieren-native Sheet

// In normal css
.image{
   width: 100px;
   height: 100px;
   object-fit: cover;
 }

// in react-native StyleSheet
image:{
   width: 100;
   height: 100;
   resizeMode: "cover";
 }

ODER Objektanpassung enthalten

// In normal css

.image{
   width: 100px;
   height: 100px;
   object-fit: contain;
 }

 // in react-native StyleSheet
image:{
   width: 100;
   height: 100;
   resizeMode: "contain";
 }
Crispen Gari
quelle
0
{ flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }

Wenn Sie diese Attribute in Ihrer Stil-Requisite verwenden, ist <Image />das Bild verschwunden.

Fügen Sie Ihr Bild in ein <View>Tag ein. So was:

<View 
  style={{
      width: '100%',
     height: '30%'
     }}
>
          <Image
            source={require('../logo.png')}
            style={{
              flex: 1,
              height: undefined,
              width: undefined,
              resizeMode: 'contain'
            }}
            resizeMode={'cover'}
          />
</View>

Geben Sie Ihrer Ansicht die gewünschte Breite und Höhe.

Kamal Hossain
quelle
-3

Hier ist meine Lösung, wenn Sie das Seitenverhältnis kennen, das Sie entweder aus den Bildmetadaten oder aus Vorkenntnissen erhalten können. Dies füllt die gesamte Breite des Bildschirms aus, kann aber natürlich angepasst werden.

function imageStyle(aspect)
{
    //Include any other style requirements in your returned object.
    return {alignSelf: "stretch", aspectRatio: aspect, resizeMode: 'stretch'}
} 

Dies sieht ein bisschen besser aus als containund erfordert weniger Finesse bei den Größen. Die Höhe wird angepasst, um das richtige Seitenverhältnis beizubehalten, damit Ihre Bilder nicht schief aussehen. Durch die Verwendung von "Enthalten" wird das Seitenverhältnis beibehalten, aber an Ihre anderen Stilanforderungen angepasst, wodurch das Bild möglicherweise drastisch verkleinert wird.

Samdoj
quelle
sehr schlecht ans bitte versuchen Sie den Code selbst und fügen Sie ein
Bikram Thapa