Полноэкранное изображение в React Native

Как сделать <Image> заполнить всю область размером UIWindow в React Native? Если бы я использовал Autolayout, я бы установил ограничение для каждого ребра, но поток - это совсем другая парадигма, и я не веб-парень. Не устанавливая ручную ширину/высоту на моем <Image>, ничего не появляется, но как я динамически говорю стиль, чтобы он был таким же, как ширина и высота его родительского элемента или, по крайней мере, окно?

Ответы

Ответ 1

Вам нужно использовать flexbox. Вот полный пример:

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

Обратите внимание, что вам нужен контейнер, чтобы вы могли определить гибкость элементов внутри него. Ключ здесь alignItems: 'stretch', чтобы содержимое imageContainer заполнило доступное пространство.

iOS Simulator Screenshot

Ответ 2

если вы поддерживаете Android и iOS, вы можете использовать этот код, вам нужно скрыть панель инструментов и StatusBar

StatusBar hiden

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

ToolBar hiden

static navigationOptions = {
    header: null
}