React Native中的全屏图像

Question

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

请注意,您需要一个容器来允许您定义其中项目的flex.这里的关键是alignItems: 'stretch'使imageContainer的内容填充可用空间.