顯示空白屏幕 - 反應原生

我寫了一個簡單的React Native應用程序，它應顯示四個彩色矩形。該應用程序運行良好，但應用程序只顯示一個空白的白色屏幕。我只用一個文本替換了渲染函數的內容，即可正確顯示。出了什麼問題？顯示空白屏幕 - 反應原生

法典規定如下：

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' 
} 
});

來源

2017-06-13 dhrumil.m

爲什麼你在導入語句中使用「.js」？另外如果你的文件名是MainScreen.js（假設你的文件名是大寫的M），那麼你的導入語句應該是這樣的：import mainscreen from'./components/screens/Mainscreen';另外我假設你正在導入的文件的路徑是正確的。 –

是的，我正在使用正確的路徑。它的主屏幕類mainscreen.js。我嘗試用文本替換整個「視圖」，並且顯示正確。問題出在嵌套視圖本身。 @Ankit Aggarwal –

造型有一些問題。從以下位置刪除flex：1：「container」，「smallContainer」，「above」和「bottom」樣式。此外，給「高於」和「低於」風格一些高度。那可行。將盡力找到原因 –

給柔性：1您在查看造型組件（一切都很好）如下：

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

    } 
}

通知彎曲的樣式：在頂層視圖分量1。有必要告訴視圖採取全屏寬度和高度。否則，的高度和寬度將爲0。

來源

2017-06-14 09:58:05

是的，我明白你的觀點，但我已經這麼做了。而是單獨使用樣式而不是內聯。 –

很棒:)。如果這個答案是正確的，你能否將其標記爲可以幫助他人解決同樣的問題。 –

顯示空白屏幕 - 反應原生

回答

相關問題