wake-up-neo.com

Ändern der Bildgröße in React Native

Ich versuche, die Größe eines Bildes (kleiner für den Bildschirm) in meiner reaktiven App zu ändern, kann es 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 das mit flexbox resizeMode gemacht werden? Wie machst du das? Ich kann keine Dokumente darauf finden ...

javascriptreactjsreact-native
40
rahul2001

bild fixiert die Ansicht automatisch

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

Ich passe deine Antwort ein wenig an (Shixukai)

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

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

36
Apit John Ismail

Das hat für mich funktioniert:

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

  }

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

20
GenericJam

Ich hatte das gleiche Problem und konnte den resize-Modus anpassen, bis ich etwas fand, mit dem ich zufrieden war. Alternative Ansätze sind:

  • Reduzieren Sie die Größe der Static Resource mit einem Bildeditor
  • Fügen Sie der statischen Ressource mit einem Bildeditor einen transparenten Rahmen hinzu
  • Verwenden Sie eine Netzwerkressource auf Kosten von UX

Um bei der Bildoptimierung einen Qualitätsverlust zu vermeiden, sollten Sie mit Vektorgrafiken arbeiten, sodass Sie mit verschiedenen Größen problemlos experimentieren können. Inkscape ist ein kostenloses Tool und funktioniert gut für diesen Zweck.

8
Josh Habdas

Nachdem ich einige Kombinationen ausprobiert habe, bekomme ich folgende Funktionsweise:

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

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

7
Henry Tiquet Leyva

Das hat für mich funktioniert:

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

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

3
Jamie Hall

Das hat für mich funktioniert,

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

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

<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 mit height: 200, width: 220 überflüssig.

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

Verwenden Sie den Resizemode mit 'cover' oder 'include' und stellen Sie die Höhe und das Bild ein.

2
Pramod Mg

In meinem Fall konnte "width" und "height" nicht auf null gesetzt werden, da ich TypeScript verwende.

So habe ich es behoben, indem ich sie auf '100%' gesetzt habe:

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

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

0
Moazzam Khan

Sie können reaktionsnatives skalierbares Bild verwenden

https://www.npmjs.com/package/react-native-scalable-image

  import Image from 'react-native-scalable-image';


     <View style={{width:200,height:200,overflow:'hidden'}}>
        <Image
          width={200} // height will be calculated automatically
          source={{uri: '<image uri>'}}
         />
     </View>
0
Jamal

Versuchen Sie dies: (für mehr Details hier klicken )

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