Bildgrößenanpassung in React Native

Question

Ich versuche, ein Bild (kleiner, um Bildschirm anzupassen) in meiner nativen App reagieren, aber ich bin nicht in der Lage, es zu 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 versuchte, es aus dem Container-Tag zu nehmen, aber kann nicht scheinen, zu verstehen, warum es nicht richtig machen wird?

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

Answer 1

Ran in das gleiche Problem und war in der Lage, die resize mode zu zwicken, bis ich etwas fand, mit dem ich glücklich war. Alternative Ansätze umfassen:

• Reduzieren Sie die Größe des Static Resource mit einem Bildeditor
• eine transparente Grenze zur statischen Ressource hinzufügen mit einem Bildeditor
• Verwenden Sie ein Network Resource auf Kosten der 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.

Answer 2

Verwenden Sie Resizemode mit "cover" oder "contain" und stellen Sie die Höhe und mit dem Bild.

Answer 3

Bild Auto befestigen Sie die Ansicht

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

Answer 4

ich Ihre Antwort ein bisschen (shixukai) einstellen

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

Wenn ich auf null gesetzt, das Bild zeigen, wird nicht überhaupt. Ich setze auf bestimmte Größe wie 50

Answer 5

Das ist für mich gearbeitet, Bild: { Breite: 200, Höhe: 220, resizeMode: 'cover' }

Sie können auch Ihre resizeMode gesetzt:‘ enthalten'. Ich definiert den Stil für mein Netzwerk Bilder wie:

Wenn Sie Flex arbeiten, verwenden Sie es in allen Komponenten der Elternansicht, sonst ist es redundant mit Höhe: 200 Breite: 220.

Answer 6

Nachdem einige Kombinationen versuchen, bekomme ich arbeiten diese wie folgt aus:

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

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

Answer 7

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

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

Das sieht ein bisschen schöner als contain, und nimmt weniger finessing mit Größen, und es wird die Höhe zu halten, das richtige Seitenverhältnis einstellen, so dass Ihre Bilder nicht verzerrt aussehen. Durch die Verwendung von contain wird das Seitenverhältnis beibehalten, es wird jedoch an Ihre anderen Formatanforderungen angepasst, wodurch das Bild drastisch verkleinert werden kann.

Answer 8

Das ist für mich gearbeitet:

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

    } 

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