React-native flex - 表示要素が表示されない

Question

私はRNを学んでおり、フレックスでレイアウトを練習しています。下のコードでは、テキストのLOGOを持つView要素は 'フッター'に表示されますが、 'ヘッダー'には表示されません。

/** 
* Sample React Native App 
* https://github.com/facebook/react-native 
* @flow 
*/ 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    TextInput, 
    View 
} from 'react-native'; 

export default class groceryApp extends Component { 
    constructor(props) { 
    super(props); 
    this.state = {text: 'myState'}; 
    } 
    render() { 
    return (
     <View style={styles.container}> 

     <View style={styles.header}> 
      <View style={styles.leftbox}> 
      <Text>LOGO</Text> 
      </View> 
     </View> 

     <View style={styles.main}> 
      <View style={styles.box}><Text>111</Text></View> 
      <View style={styles.box}><Text>{this.state.text}</Text></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
      <View style={styles.box}></View> 
     </View> 

     <View style={styles.footer}> 
      <View style={styles.leftbox}> 
      <Text>LOGO</Text> 
      </View> 
     </View> 
     </View> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    flexDirection: 'column', 
    justifyContent: 'center', // or 'space-between' 
    alignItems: 'stretch', 
    // 'flex-start', 'flex-end', 'stretch', 'center' 
    // for 'stetch' you have to remove fixed size from secondary from elements 
    }, 
    header: { 
    height: 200, 
    backgroundColor: 'powderblue', 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'flex-start', 
    }, 
    main: { 
    height: 450, 
    backgroundColor: 'skyblue', 
    flex: 1, 
    flexDirection: 'row', 
    justifyContent: 'center', 
    flexWrap: 'wrap', 
    }, 
    footer: { 
    height: 200, 
    backgroundColor: 'steelblue', 
    flex: 1, 
    flexDirection: 'row', 
    alignItems: 'flex-start', 
    }, 
    box: { 
    height: 100, 
    width: 100, 
    margin: 5, 
    backgroundColor: 'green', 
    }, 
    leftbox: { 
    height: 50, 
    width: 50, 
    backgroundColor: 'green', 
    }, 
}); 

AppRegistry.registerComponent('groceryApp',() => groceryApp); 

ここでは何が欠けていますか？フッターとヘッダークラ​​スは同じように見えるので、どのように違うのですか？

Answer 1

ロゴのテキストはありますが、画面の寸法のために表示されません。

フレックスコンテナ内で固定高さの寸法を使用しています...これは理想的ではありません。スクリーンの高さの合計は、宣言した高さよりも低くなります。コンテナの絶対的な高さではなく、ちょうど屈曲するようにしてください。

のスタイルをheaderalignItemsからflex-endに変更すると、あなたのテキストが表示されます。または、コンテンツをScrollViewにラップして、何が起きているかを確認する必要があります。