ios - React Native 中的全屏图像

Question

如何在 React Native 中<Image>填充整个大小的区域？UIWindow如果我使用自动布局，我会在每个边缘设置一个约束，但通量是非常不同的范例，我不是网络人。如果没有在我的任何内容上设置手动宽度/高度<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);

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

Answer 2

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

状态栏隐藏

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

工具栏隐藏

static navigationOptions = {
    header: null
}