显示空白屏幕 - 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'
}
});

- Dhrumil Mayur Mehta

---

你为什么在导入语句中使用“.js”？另外，如果你的文件名是MainScreen.js（假设你的文件名是大写M），那么你的导入语句应该像这样：import Mainscreen from './components/screens/Mainscreen'; 我还假设你导入文件的路径是正确的。 - Ankit Aggarwal

是的，我正在使用正确的路径。它是mainscreen.js中的Mainscreen类。我尝试用Text替换整个“View”，并且可以正确显示。问题在于嵌套的Views本身。@Ankit Aggarwal - Dhrumil Mayur Mehta

有一些样式问题。从以下样式中删除“container”、“smallContainer”、“above”和“bottom”的flex：1。此外，给“above”和“below”样式一些高度。这样就可以了。我会尝试找出原因。 - Ankit Aggarwal

是的，我在样式方面做了一些更改，现在它可以正常工作了。无论如何还是谢谢你！ - Dhrumil Mayur Mehta

Answer 1

给你的视图在样式组件中添加 flex: 1（其他都不变）如下所示：

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

    }
}

注意顶层视图组件中 flex:1 样式的使用。这是告诉视图占用 全屏的宽度和高度 的必要方法。否则，高度和宽度将为0。

- Ankit Aggarwal

---

是的，我明白你的意思，但我已经这样做了。相反，我单独使用样式而不是内联。 - Dhrumil Mayur Mehta

很好：)。如果这个答案正确，请标记为已接受，以帮助其他遇到相同问题的人。 - Ankit Aggarwal

请告诉我您下投票的原因，这样答案才能得到改进。标记为“无用”可能不会帮助其他人。 - Ankit Aggarwal

非常感谢。我想知道为什么我的视图组件是白色的，而不是渲染里面的东西。这解决了它。:D - 1cedsoda