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

【问题标题】：How to styles view to a ratio like 16:9 in React Native?如何在 React Native 中将视图样式设置为 16:9 之类的比例？
【发布时间】：2015-06-09 10:19:24
【问题描述】：

我想让红色视图保持 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 中的 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"
]"

【问题讨论】：

标签： ios facebook reactjs flexbox react-native

【解决方案1】：

React Native（从 0.40 开始）支持 aspectRatio 属性。

你可以这样做：

style={{ aspectRatio: 16/9 }}

见Maintain aspect ratio of image with full width in React Native

【讨论】：

非常感谢。请允许我再问一个问题。你在哪里知道有像“Dimensions”这样的模块？我浏览了官方文档，但没有找到。
我在某处看到它是这样使用的 :)
@ShuangzuanHe Dimesions

【解决方案2】：

您可以使用布局功能。

    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>
            );
          }
        });

【讨论】：