React Native 中的 Absolute 和 Flexbox

javascript css react-native

2022-08-30 05:21:13

我想在屏幕底部放一个白条，它将占用所有宽度。为此，我考虑过将定位与继承的参数结合使用。absoluteflexbox

使用以下代码，它呈现类似这样的东西。

这是我的代码：

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,

答案 2

第一步是添加

position: 'absolute',

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

left: 0,
right: 0,

然后，如果要将元素放在底部，请添加

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

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