Bildgrößenänderung in React Native

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 ...

Bild automatisch die Ansicht korrigieren

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

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

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).

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)

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.

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.

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',        
}

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

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

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.

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

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

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>

** 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";
 }

{ 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.

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.