css - React-Native justifyContent 不起作用

Question

class Application extends Component {
  render() {
    return (
      <View style={styles.container}>
        <NewItemContainer />
        <UndoRedoContainer />
        {/*
        <UnpackedItemsContainer title="Unpacked Items" render={() => <UnpackedFilterContainer />} />
        <PackedItemsContainer title="Packed Items" render={() => <PackedFilterContainer />} />
        <MarkAllAsUnpackedContainer /> */}
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor:'#F79D42',
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
  }
});


export default Application;

我要做的就是将内容移动到屏幕中央(垂直)。

justifyContent: 'center'

应该在这里工作，但它不工作。我已经发布了图片的链接。 https://1drv.ms/u/s!Agwl3ZPMPDkwg_V0EB-4u-njSFZaKg

Answer 1

给你的子组件添加backgroundColor，检查子组件是否占据了你父 View 的垂直高度。 :D

编辑:

为您的 NewItemContainer 组件添加背景，就像这样......如果 backgroundColor 变为子组件的颜色，则必须调整其 flex 或将其更改为 height , width 属性

import React, {Component} from 'react';
import {View, Button} from 'react-native';

export default class NewItemContainer extends Component{
  render(){
    return(
      <View style={{flex:1, backgroundColor:'green'}}>
      <Button title='Click Me' />
    </View>
    )
  }
}