ios - 如何将 View 样式设置为 16 :9 in React Native? 之类的比率
<p><p>我想让红色 View 保持 16:9 的比例。我尝试但失败了。我知道 React Native 使用 Flexbox(在 Javascript 中重新实现)，但我不知道该怎么做。谢谢。</p>
<p>这是我的 Javascript:</p>
<pre><code>'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);
</code></pre>
<p>这是关于 React Native 中的 Flexbox 的文档:</p>
<p> <a href="http://facebook.github.io/react-native/docs/flexbox.html#content" rel="noreferrer noopener nofollow">http://facebook.github.io/react-native/docs/flexbox.html#content</a> </p>
<p>这是有效的样式 Prop :</p>
<pre><code>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"
]"
</code></pre></p>
<br><hr><h1><strong>Best Answer-推荐答案</ strong></h1><br>
<p><p>React Native(从 0.40 开始)支持 <a href="https://facebook.github.io/react-native/docs/layout-props#aspectratio" rel="noreferrer noopener nofollow"><code>aspectRatio</code></a> Prop 。</p>
<p>你可以这样做:</p>
<p><code>style={{ aspectRatio: 16/9 }}</code></p>
<p>见 <a href="https://stackoverflow.com/questions/29642685/maintain-aspect-ratio-of-image-with-full-width-in-react-native" rel="noreferrer noopener nofollow">Maintain aspect ratio of image with full width in React Native</a> </p></p>
<p style="font-size: 20px;">关于ios - 如何将 View 样式设置为 16 :9 in React Native? 之类的比率，我们在Stack Overflow上找到一个类似的问题：
<a href="https://stackoverflow.com/questions/29447207/" rel="noreferrer noopener nofollow" style="color: red;">
https://stackoverflow.com/questions/29447207/
</a>
</p>
页:
[1]