React Native中的全屏图像

Question

如何使<Image>填充React Native中的整个UIWindow大小的区域？如果我使用Autolayout，我会在每个边缘设置约束，但是通量是非常不同的范例，我不是网络人。没有设置我的<Image>手动宽度/高度没有显示，但我如何动态地告诉样式与其父元素的宽度和高度相同，或者至少是窗口？

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

请注意，您需要一个容器来允许您定义其中项目的flex。这里的关键是alignItems: 'stretch'，以使imageContainer的内容填充可用空间。

Answer 2

如果支持Android和iOS则可以使用此代码， 你需要隐藏工具栏和状态栏

StatusBar hiden

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

工具栏隐藏

static navigationOptions = {
    header: null
}