ios - stacknavigator - Imagen de pantalla completa en React Native

react native stacknavigator header

Question

¿Cómo se hace una <Image> llenar toda el UIWindow tamaño UIWindow en React Native? Si estuviera usando Autolayout, establecería una restricción en cada borde, pero el flujo es un paradigma muy diferente y no soy un tipo de web. Sin establecer un ancho / alto manual en mi <Image> no aparece nada, pero ¿cómo le digo dinámicamente que el estilo sea el mismo que el ancho y la altura de su elemento principal, o al menos la ventana?

Answer 1

Necesitas usar flexbox . Aquí hay un ejemplo completo:

''use strict'';

var React = require(''react-native'');

var {
  AppRegistry,
  StyleSheet,
  View,
  Image
} = React;

var TestCmp = React.createClass({
  render: function() {
    return (
      <View style={styles.imageContainer}>
        <Image style={styles.image} source={{uri: ''http://lorempixel.com/200/400/sports/5/''}} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  imageContainer: {
    flex: 1,
    alignItems: ''stretch''
  },
  image: {
    flex: 1
  }
});

AppRegistry.registerComponent(''RCTTest'', () => TestCmp);

Tenga en cuenta que necesita un contenedor que le permita definir la flexibilidad de los elementos que contiene. La clave aquí es alignItems: ''stretch'' para hacer que los contenidos de imageContainer llenen el espacio disponible.

Answer 2

Si es compatible con Android y iOS, puede usar este código, debe ocultar la barra de herramientas y la barra de estado

StatusBar hiden

return (
        <View style={styles.root_layout}>
            <StatusBar hidden={true} />
            ...
        </View>
    )

Barra de herramientas oculta

static navigationOptions = {
    header: null
}