顯示空白屏幕-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 。