如何在React Native中将视图样式设置为16：9的比例？

Question

我想让红色视图保持比例为16：9。我尝试但失败了。我知道React Native使用Flexbox（在Javascript中重新实现），但我不知道如何做到这一点。谢谢。

这里是我的javascript：

'use strict'; 

var React = require('react-native'); 
var { 
    AppRegistry, 
    StyleSheet, 
    View, 
} = React; 

var AwesomeProject = React.createClass({ 
    render: function() { 
    return (
     <View style={styles.container}> 
     <View style={styles.banner}> 

     </View> 
     <View style={styles.items}> 

     </View> 
     </View> 
    ); 
    } 
}); 

var styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    }, 
    banner: { 
    backgroundColor: 'red', 
    flex: 1, 
    }, 
    items: { 
    backgroundColor: 'blue', 
    flex: 3, 
    }, 
}); 

AppRegistry.registerComponent('AwesomeProject',() => AwesomeProject); 

这里是关于Flexbox的文件阵营母语：

http://facebook.github.io/react-native/docs/flexbox.html#content

这里是有效的样式道具：

Valid style props: [ 
    "width", 
    "height", 
    "top", 
    "left", 
    "right", 
    "bottom", 
    "margin", 
    "marginVertical", 
    "marginHorizontal", 
    "marginTop", 
    "marginBottom", 
    "marginLeft", 
    "marginRight", 
    "borderWidth", 
    "borderTopWidth", 
    "borderRightWidth", 
    "borderBottomWidth", 
    "borderLeftWidth", 
    "position", 
    "flexDirection", 
    "flexWrap", 
    "justifyContent", 
    "alignItems", 
    "alignSelf", 
    "flex", 
    "resizeMode", 
    "backgroundColor", 
    "borderColor", 
    "borderRadius", 
    "tintColor", 
    "opacity", 
    "fontFamily", 
    "fontSize", 
    "fontWeight", 
    "fontStyle", 
    "lineHeight", 
    "color", 
    "containerBackgroundColor", 
    "textAlign", 
    "writingDirection", 
    "padding", 
    "paddingVertical", 
    "paddingHorizontal", 
    "paddingTop", 
    "paddingBottom", 
    "paddingLeft", 
    "paddingRight", 
    "borderTopColor", 
    "borderRightColor", 
    "borderBottomColor", 
    "borderLeftColor", 
    "overflow", 
    "shadowColor", 
    "shadowOffset", 
    "shadowOpacity", 
    "shadowRadius", 
    "transformMatrix", 
    "rotation", 
    "scaleX", 
    "scaleY", 
    "translateX", 
    "translateY" 
]" 

Answer 1

如果内容你想要显示的是已知有一个固定的比例（例如16：9图像）你不需要做任何额外的造型。

否则，你可以做这样的事情：

比

banner: { 
    width: Dimensions.get('window').width, 
    height: Dimensions.get('window').width * 9/16, 
}, 

其他，我不认为这是可以做到与Flexbox的没有一些计算。我在这里找到了good demo，但它使用了.box:before的技巧，这在Flexbox中不可用。

有关文件的说明：请检查this excellent Flexbox guide。