[英]What's the equivalent of React Native { flex: 1 } for React JS?
我在React Native中编程了很多,我正在尝试使用React js(仅限web),我不知道如何制作一个简单的View,让所有屏幕开始播放所有组件。
让我解释:
在React Native中,我使用flex处理View维度,如下所示:
<View style={{ flex: 1 }}>
<View style={{ flex: 0.5, backgroundColor: 'blue' }}>
<Text>I'm a blue 50% screen View!</Text>
</View>
<View style={{ flex: 0.5, backgroundColor: 'yellow' }}>
<Text>I'm a yellow 50% screen View!</Text>
</View>
</View>
但是在React JS中我必须使用不识别flex的div标签。 我的意思是,我不能这样做:
<div style={{ flex: 1 }}>
<div style={{ flex: 0.5, backgroundColor: 'blue' }}>
<p>I'm a blue 50% screen View!</p>
</div>
<div style={{ flex: 0.5, backgroundColor: 'yellow' }}>
<p>I'm a yellow 50% screen View!</p>
</div>
</div>
我如何在React js中使用这些样式来获取百分比结果?
React Native使用自己的flexbox实现 - https://facebook.github.io/react-native/docs/flexbox
在React中你使用CSS flexbox - https://developer.mozilla.org/en-US/docs/Glossary/Flexbox
Flexbox在React Native中的工作方式与在Web上的CSS中的工作方式相同,但有一些例外。 默认值不同,flexDirection默认为列而不是行,flex参数仅支持单个数字。
在css中,您还需要将父容器声明为
.flex-container {
display: flex;
}
这可能就是你所缺少的。
你的flex的纯CSS版本可能看起来像这样(样式为“字符串”版本):
<div style="display: flex; flex-direction: column; height: 100vh;">
<div style="flex: 1; background-color: blue;">
<p>I'm a blue 50% screen View!</p>
</div>
<div style="flex: 1; background-color: yellow;">
<p>I'm a yellow 50% screen View!</p>
</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.