ios React Native 中的全屏图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29349649/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Full screen image in React Native
提问by Jarsen
How do you make an <Image>fill the entire UIWindowsized area in React Native? If I were using Autolayout I would set a constraint on each edge, but flux is very different paradigm and I'm not a web guy. Without setting a manual width/height on my <Image>nothing shows up, but how do I dynamically tell the style to be the same as the width and heigh of its parent element, or at the very least the window?
你如何在 React Native 中<Image>填充整个UIWindow大小的区域？如果我使用 Autolayout，我会在每条边上设置一个约束，但 Flux 是非常不同的范式，我不是网络专家。如果没有设置手动宽度/高度，我<Image>什么也没有显示，但是我如何动态地告诉样式与其父元素的宽度和高度相同，或者至少是窗口的宽度和高度？
回答by Colin Ramsay
You need to use flexbox. Here's a full example:
您需要使用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);
Notice that you need a container to allow you to define the flex of items within it. The key here is alignItems: 'stretch'to make the contents of imageContainer fill the available space.
请注意，您需要一个容器来允许您在其中定义项目的弹性。这里的关键是alignItems: 'stretch'让 imageContainer 的内容填满可用空间。
回答by ayac3j
if support Android and iOS you can use this code , you need hide Toolbar and StatusBar
如果支持 Android 和 iOS 你可以使用这个代码，你需要隐藏工具栏和状态栏
StatusBar hiden
隐藏状态栏
return (
<View style={styles.root_layout}>
<StatusBar hidden={true} />
...
</View>
)
ToolBar hiden
工具栏隐藏
static navigationOptions = {
header: null
}
