Javascript React Native 中的 Absolute 和 Flexbox
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29541971/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Absolute and Flexbox in React Native
提问by ilansas
I would like to put a white bar which would take all of the width at the bottom of the screen. To do so I thought about using absolutepositioning with the inherited flexboxparameters.
我想在屏幕底部放置一个白条，它将占据屏幕底部的所有宽度。为此，我考虑使用absolute带有继承flexbox参数的定位。
With the following code it renders something like this.
使用以下代码，它会呈现类似这样的内容。
Here is my code :
这是我的代码：
var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
I'm new to styling in CSS and not all the properties are available in React-Native. So any help is appreciated, thanks :)
我是 CSS 样式的新手，并非所有属性都在 React-Native 中可用。所以任何帮助表示赞赏，谢谢:)
回答by ilansas
Ok, solved my problem, if anyone is passing by here is the answer:
好的，解决了我的问题，如果有人路过这里是答案：
Just had to add left: 0,and top: 0,to the styles, and yes, I'm tired.
只需要添加left: 0,和添加top: 0,样式，是的，我累了。
position: 'absolute',
left: 0,
top: 0,
回答by Spark.Bao
The first step would be to add
第一步是添加
position: 'absolute',
then if you want the element full width, add
然后如果你想要元素全宽，添加
left: 0,
right: 0,
then, if you want to put the element in the bottom, add
然后，如果要将元素放在底部，请添加
bottom: 0,
// don't need set top: 0
if you want to position the element at the top, replace bottom: 0by top: 0
如果要将元素定位在顶部，请替换bottom: 0为top: 0
回答by Alex
This solution worked for me:
这个解决方案对我有用：
tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}
