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 添加到您的子組件，檢查子組件是否占據父視圖的垂直高度。 :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>
    )
  }
}

Answer 2

嘗試添加這種樣式：

justifyContent: 'center',
alignItems: 'center',
flex: 1

Answer 3

不知道是什么問題，但這就是我設法解決它的方法只需用這樣的額外視圖包裹整個事情。 我確實認為它應該與您的原始代碼一起使用

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

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


export default Application;