Estoy tratando de cambiar el tamaño de una imagen (más pequeña para ajustarse a la pantalla) en mi aplicación nativa de reacción, pero no puedo hacerlo porque es demasiado grande.

Aquí está el código:

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

Traté de sacarlo de la etiqueta del contenedor, pero parece que no puedo entender por qué no se representa correctamente.

¿Se puede hacer esto con flexbox resizeMode? ¿Cómo lo haces? No puedo encontrar ningún documento al respecto ...