我已经在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中为div使用那种样式以获取百分比结果?
答案 0 :(得分:2)
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>