React Native 中的全屏图像
Full screen image in React Native
如何在 React Native 中让 <Image>
填满整个 UIWindow
大小的区域?如果我使用 Autolayout,我会在每条边上设置一个约束,但 flux 是非常不同的范例,我不是网络专家。没有在我的 <Image>
上设置手动 width/height 什么都没有显示,但是我如何动态地告诉样式与其父元素的宽度和高度相同,或者至少 window?
您需要使用 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的内容填满可用的space.
如果支持 Android 和 iOS 你可以使用这个代码,
你需要隐藏工具栏和状态栏
状态栏隐藏
return (
<View style={styles.root_layout}>
<StatusBar hidden={true} />
...
</View>
)
工具栏隐藏
static navigationOptions = {
header: null
}
如何在 React Native 中让 <Image>
填满整个 UIWindow
大小的区域?如果我使用 Autolayout,我会在每条边上设置一个约束,但 flux 是非常不同的范例,我不是网络专家。没有在我的 <Image>
上设置手动 width/height 什么都没有显示,但是我如何动态地告诉样式与其父元素的宽度和高度相同,或者至少 window?
您需要使用 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的内容填满可用的space.
如果支持 Android 和 iOS 你可以使用这个代码, 你需要隐藏工具栏和状态栏
状态栏隐藏
return (
<View style={styles.root_layout}>
<StatusBar hidden={true} />
...
</View>
)
工具栏隐藏
static navigationOptions = {
header: null
}