空白の画面が表示されます - ネイティブに反応します

Question

4色の四角形を表示する単純なReactネイティブアプリを作成しました。アプリは正常に動作しますが、アプリは空の白い画面しか表示していません。レンダリング機能の内容をテキストだけに置き換えました。これは正しく表示されています。何がうまくいかないのですか？

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

与えるフレックス：1であなたのビューに次のようにスタイリングコンポーネント（その他はすべて問題ありません）：

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

    } 
} 

通知フレックスのスタイル：トップレベルのビューコンポーネントにおける1。ビューにフルスクリーンの幅と高さのを表示する必要があります。そうでなければ、の高さと幅は0になります。