Ridimensionamento immagine in React Native

Question

Sto provando a ridimensionare un'immagine (più piccola per adattarla allo schermo) nella mia app nativa reattiva ma non riesco a farlo perché è troppo grande.

Ecco il codice:

'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> 
    ); 
    } 
} 

ho cercato di tirarla fuori del tag contenitore, ma non riesco a capire il motivo per cui non renderà correttamente?

Questo può essere fatto con flexbox resizeMode? Come si fa? Non riesco a trovare alcun documento su di esso ...

Answer 1

Ran nello stesso problema ed è stato in grado di modificare il resize mode finché non ho trovato qualcosa di cui ero felice. Approcci alternativi includono:

• Ridurre la dimensione del Static Resource utilizzando un editor di immagini
• aggiungere un bordo trasparente alla risorsa statica usando un editor di immagini
• Utilizzare un Network Resource a scapito di UX

Per evitare la perdita di qualità mentre si apportano modifiche alle immagini, è consigliabile lavorare con la grafica vettoriale in modo da poter sperimentare facilmente diverse dimensioni. Inkscape è uno strumento gratuito e funziona bene per questo scopo.

Answer 2

Utilizzare Risizemode con "cover" o "contain" e impostare l'altezza e l'immagine.

Answer 3

automatica dell'immagine fissare il View

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

Answer 4

ho regolare la risposta un po '(shixukai)

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

Quando ho impostato su null, l'immagine mostra abituato a tutti. Ho impostato a certa dimensione come 50

Answer 5

Questo ha funzionato per me, immagine : { Larghezza: 200, altezza: 220, resizeMode: 'copertura' }

È anche possibile impostare il resizeMode:' contenere'. Ho definito lo stile per le mie immagini di rete come:

Se si utilizza flex, utilizzarlo in tutte le componenti del genitore View, altrimenti è ridondante con altezza: 200, Larghezza: 220.

Answer 6

Dopo aver provato alcune combinazioni, ottengo questo a lavorare in questo modo:

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

In particolare in questo ordine. Spero che questo possa essere utile per qualcuno. (So ​​che è una vecchia domanda)

Answer 7

Ecco la mia soluzione se si conoscono le proporzioni, che è possibile ottenere dai metadati dell'immagine o dalle conoscenze precedenti. Questo riempie l'intera larghezza dello schermo, ma questo, ovviamente, può essere regolato.

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

Questo sembra un po 'più bello di contain, e richiede meno finessing con i formati, e sarà regolare l'altezza per mantenere le proporzioni corretta in modo che le immagini non sembrano distorta. L'utilizzo di contiene preserverà le proporzioni, ma lo ridimensionerà per adattarsi agli altri requisiti di stile, che potrebbero ridurre drasticamente l'immagine.

Answer 8

questo ha funzionato per me:

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

    } 

aspectRatio è solo larghezza/altezza (la mia immagine è 45px 30px di larghezza x altezza).