React Native中的全屏图像

Question

如何在React Native中使<Image>占据整个UIWindow大小的区域？如果我使用Autolayout，我会在每个边缘上设置一个约束条件，但是flux是非常不同的范例，而且我不是一个网页开发者。如果我没有在<Image>上手动设置宽度/高度，什么也不会显示出来，但是我该如何动态地告诉样式与其父元素的宽度和高度相同，或者至少与窗口相同呢？

- Jarsen

Answer 1

你需要使用弹性布局。这是一个完整的例子：

'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 中的内容填充可用空间。

- Colin Ramsay

---

太好了。这基本上就是我所拥有的，只是我使用的是“center”而不是“stretch”。像这样的许多小事情我将不得不弄清楚。谢谢！ - Jarsen

是的，我想你必须设置像素宽度才能使其出现在“中心”。请记住，React Native中的flexbox是flexbox规范的实现，因此您应该能够使用文档和指南来帮助掌握它。这是一个很好的开始：https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes - Colin Ramsay

这对我来说似乎不起作用，我正在使用一个ListView来显示图像，也许ListView会导致这个问题吗？ - Christian Strang

可能。就像我在回答中所说的那样，包含的样式也会产生影响。虽然听起来有些不同，但值得开一个新问题讨论，我想说的是，这可能更多地涉及到弹性盒子而不是React Native。 - Colin Ramsay

有没有办法让图片“适应”整个屏幕？如果我只指定图像的宽度和高度，则似乎只能这样做。如果图像大于屏幕，则会得到一个居中裁剪的版本，而我更希望它适应屏幕。我试图手动实现这个效果，但我不知道如何获得可用屏幕大小（或父视图大小），以便手动调整图像大小。 - Mike Driver

Answer 2

如果支持Android和iOS系统，您可以使用以下代码。但需要隐藏工具栏和状态栏。 隐藏状态栏：

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

工具栏隐藏

static navigationOptions = {
    header: null
}

- ayac3j