React Native 中的 Absolute 和 Flexbox

Posted 2023-02-22

【中文标题】React Native 中的 Absolute 和 Flexbox

【英文标题】：Absolute and Flexbox in React Native

【发布时间】：2015-06-15 00:34:20

【问题描述】：

我想在屏幕底部放置一个占据所有宽度的白条。为此，我考虑过将absolute 定位与继承的flexbox 参数一起使用。

使用以下代码，它会呈现类似this 的内容。

这是我的代码：

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-Native 中可用。因此，感谢您提供任何帮助，谢谢:)

【参考方案1】：

好的，解决了我的问题，如果有人路过这里就是答案：

只需在样式中添加left: 0, 和top: 0,，是的，我累了。

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

【讨论】：

感谢发布。身高似乎也是如此 - 而不是height:100%，而是top:0, bottom:0。

但是如果你想把bar放在底部，全宽，你应该加left:0, right:0，不应该加top:0，如果你设置top:0和bottom:0，它将显示全屏。

我怎样才能居中？例如，我想在我的组件顶部显示一个微调器，并且我希望微调器是绝对且居中的？

为了用绝对定位的子元素垂直填充所有空间，添加 top:0 和 bottom:0 作为 ``height:100%" 的替代品到 @Premasagar

只需将 left、top、right 和 botton 添加到 0 即可完美运行。

【参考方案2】：

第一步是添加

position: 'absolute',

如果你想要元素全宽，添加

left: 0,
right: 0,

那么，如果你想把元素放在底部，添加

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

如果要将元素定位在顶部，请将bottom: 0 替换为top: 0

【参考方案3】：

这个解决方案对我有用：

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