反应本机中的 Absolute 和 Flexbox

我想把一个白色的酒吧，将采取所有的宽度在屏幕底部。为此，我考虑使用带有继承的 flexbox参数的 absolute定位。

With the following code it renders something like 这个.

这是我的代码:

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

我是 CSS 样式的新手，并不是所有的属性都可以在 React-Natural 中找到。所以我很感激你的帮助，谢谢

196282 次浏览

小开

最佳答案

好了，解决了我的问题，如果有人经过这里，答案是:

只是不得不增加 left: 0,和 top: 0,的风格，是的，我累了。

position: 'absolute',
left:     0,
top:      0,

小开

第一步是添加

position: 'absolute',

然后，如果您想要元素的全宽度，添加

left: 0,
right: 0,

然后，如果你想把元素放在底部，添加

bottom: 0,
// don't need set top: 0

if you want to position the element at the top, replace bottom: 0 by top: 0

小开

这个方法对我很有效:

tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}