Quería agregar una imagen de pantalla completa a la Vista, así que escribo este código
return ( <View style={styles.container}> <Image source={require('image!egg')} style={styles.backgroundImage}/> </View> )y definió el estilo como
var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', flexDirection: 'column', }, backgroundImage:{ width:320, height:480, } ...pero de esta manera, ¿cómo se supone que debo encontrar el tamaño real de la pantalla del iPhone?
He visto una API para acceder a la densidad de píxeles, pero nada sobre el tamaño de la pantalla...
(Esto ha quedado obsoleto ahora puede usar ImageBackground )
Así es como lo he hecho. El trato principal fue deshacerse de los tamaños fijos estáticos.
class ReactStrap extends React.Component { render() { return ( <Image source={require('image!background')} style={styles.container}> ... Your Content ... </Image> ); } } var styles = StyleSheet.create({ container: { flex: 1, // remove width and height to override fixed static size width: null, height: null, } };Puede usar flex: 1 estilo en un elemento <Image> para que ocupe toda la pantalla. Luego puede usar uno de los modos de cambio de tamaño de imagen para que la imagen llene completamente el elemento:
<Image source={require('image!egg')} style={styles.backgroundImage} />Estilo:
import React from 'react-native'; let { StyleSheet } = React; let styles = StyleSheet.create({ backgroundImage: { flex: 1, resizeMode: 'cover', // or 'stretch' } }); Estoy bastante seguro de que puede deshacerse de <View> que envuelve su imagen y esto funcionará.
Nota: Esta solución es antigua. Consulte https://facebook.github.io/react-native/docs/images.html#background-image-via-nesting en su lugar
Pruebe esta solución. Se apoya oficialmente. Lo acabo de probar y funciona perfectamente.
var styles = StyleSheet.create({ backgroundImage: { flex: 1, alignSelf: 'stretch', width: null, } });Y en cuanto a usarlo como imagen de fondo, simplemente haga lo siguiente.
<Image style={styles.backgroundImage}> <View> <Text>All your stuff</Text> </View> </Image>