React-native flex - 视图元素不显示

Question

我正在学习 RN 并且正在使用 flex 练习布局。在下面的代码中，带有文本 LOGO 的视图元素出现在 'footer' 中，但不呈现在 'header'.

中

/**
 * 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);

我在这里错过了什么？页脚和页眉 class 看起来完全相同，但有何不同？

Answer 1

徽标文本在那里...您只是因为屏幕的尺寸而看不到它。

您在弹性容器中使用固定高度尺寸……这并不理想。总屏幕高度小于您声明的所有高度。坚持只是弯曲，而不是容器的绝对高度。

将 header alignItems 的样式更改为 flex-end，您将看到您的文字。或者将您的内容包装在 ScrollView 中，您还将看到发生了什么。

React-native flex - 视图元素不显示

React-native flex - View element does not display

flexbox

react-redux