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

我想让红色视图保持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);

React Native（自0.40起）支持该道具

你可以做：

style={{aspectRatio:16/9}

---

请参见您可以在布局上使用的功能

    class AwesomeProject = extends React.Component<{}> {

    constructor(props) {
            super(props)
            this.state = {width: 0,height:0}
        }

        onPageLayout = (event) => {
            const {width, height} = event.nativeEvent.layout;
            this.setState({
                width,
                height
            })
        };

          render(){
            return (
              <View style={styles.container}>
                <View style={[
styles.banner,
{
height:this.state.width*9/16
}
]}>

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

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

class AwesomeProject=extends React.Component{
建造师（道具）{
超级（道具）
this.state={宽度：0，高度：0}
}
onPageLayout=（事件）=>{
const{width，height}=event.nativeEvent.layout；
这是我的国家({
宽度，
高度
})
};
render（）{
返回(
);
}
});

非常感谢。请允许我问另外一个问题。你知道哪里有像“维度”这样的模块吗？我翻阅了官方文件，但没有找到。我在某处看到它是这样使用的：）@shuanzuanhe

    class AwesomeProject = extends React.Component<{}> {

    constructor(props) {
            super(props)
            this.state = {width: 0,height:0}
        }

        onPageLayout = (event) => {
            const {width, height} = event.nativeEvent.layout;
            this.setState({
                width,
                height
            })
        };

          render(){
            return (
              <View style={styles.container}>
                <View style={[
styles.banner,
{
height:this.state.width*9/16
}
]}>

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

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