Как сделать <Image>
заполнить всю область размером UIWindow
в React Native? Если бы я использовал Autolayout, я бы установил ограничение для каждого ребра, но поток - это совсем другая парадигма, и я не веб-парень. Не устанавливая ручную ширину/высоту на моем <Image>
, ничего не появляется, но как я динамически говорю стиль, чтобы он был таким же, как ширина и высота его родительского элемента или, по крайней мере, окно?
Полноэкранное изображение в React Native
Ответ 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 заполнило доступное пространство.
Ответ 2
если вы поддерживаете Android и iOS, вы можете использовать этот код, вам нужно скрыть панель инструментов и StatusBar
StatusBar hiden
return (
<View style={styles.root_layout}>
<StatusBar hidden={true} />
...
</View>
)
ToolBar hiden
static navigationOptions = {
header: null
}