Question

我写了一个简单的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'
}
});

Answer 1

将 flex：1 提供给样式组件中的View（其他一切都很好），如下所示：

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

    }
}

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

显示空白屏幕 - React Native

1 个答案: