Question

我正在学习RN并且正在练习使用flex进行布局。在下面的代码中，带有文本LOGO的View元素出现在＆＃39;页脚＆＃39;但不会在标题中呈现＃。

。

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

徽标文字就在那里......由于屏幕的尺寸，你无法看到它。

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

将header alignItems的样式更改为flex-end，您将看到自己的文字。或者将您的内容包装在ScrollView中，您还应该看到正在发生的事情。

React-native flex - View元素不显示

1 个答案: