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 ...
javascript
reactjs
react-native
rahul2001
quelle
quelle
resizeMode: 'cover'
?resizeMode: 'cover'
.Antworten:
Bild automatisch die Ansicht korrigieren
image: { flex: 1, width: null, height: null, resizeMode: 'contain' }
quelle
width: undefined
undheight: undefined
stattdessen Art Fehler zu vermeiden.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
quelle
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).
quelle
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)
quelle
width: null
. Vielen Dank!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.
quelle
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:
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.
quelle
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', }
quelle
Versuchen Sie Folgendes: (Für weitere Informationen klicken Sie hier )
image: { flex: 1, height: undefined, width: undefined, resizeMode: 'contain' }
quelle
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
Verwenden Sie den Größenmodus mit 'Abdeckung' oder 'Enthalten' und stellen Sie die Höhe und mit des Bildes ein.
quelle
{ flex: 1, resizeMode: 'contain' }
arbeitete für mich. Ich brauchte das Aspektverhältnis nichtquelle
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
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>
quelle
** 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"; }
quelle
{ 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.
quelle
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
contain
und 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.quelle