显示空白屏幕-React Native

Question

我写了一个简单的React Native应用，它将显示四个彩色矩形。 该应用程序运行良好，但仅显示空白屏幕。 我只用正确显示的文本替换了render函数的内容。 怎么了？

下面提供的代码：

index.android.js：

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

import Mainscreen from './components/screens/mainscreen.js';


 class styling extends Component {
  render() {
    return (
<View>
<Mainscreen />
</View>
);

  }
}
AppRegistry.registerComponent('styling', () => styling);

Mainscreen.js：

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

export default class Mainscreen extends Component{
  render(){
return (
<View style={styles.container}>
<View style={styles.smallContainer}>
  <View style={styles.above}>
    <View style={styles.leftAbove}></View>
    <View style={styles.rightAbove}></View>
  </View>
  <View style={styles.bottom}>
    <View style={styles.leftBottom}></View>
    <View style={styles.rightBottom}></View>
    </View>
  </View>
</View>
);
}
}
const styles = StyleSheet.create({
  container:{
    flex:1,
    backgroundColor: 'black',
    flexDirection:'column'
  },
  above:{
    flex:1,
    flexDirection:'row',
    marginTop: 10,
    marginLeft: 10,
    marginBottom: 10,
    marginRight: 10
  },
  bottom:
  {
      flex:1,
      flexDirection:'row',
      marginTop: 10,
      marginLeft: 10,
      marginBottom: 10,
      marginRight: 10
  },
leftAbove:{
  backgroundColor: 'green',
  flex: 0.6,
},
rightAbove:{
backgroundColor: 'red',
flex: 0.4,
},
leftBottom:{
backgroundColor: 'blue',
flex: 0.4,
},
rightBottom:{
backgroundColor: 'yellow',
flex: 0.6,
},
smallContainer:{
  flex:1,
  padding: 10,
  backgroundColor:'black'
}
});

Answer 1

将flex：1赋予样式中的View组件（其他都可以），如下所示：

class styling extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <Mainscreen />
            </View>
        );

    }
}

请注意flex的样式：顶级视图组件中的1。 有必要告诉视图采用全屏宽度和高度 。 否则， 高度和宽度将为0 。