Question

我正在编写一个代码，以文件形式显示存储在文件中的菜肴。我创建了MainComponent.js来显示菜单菜。我也有MenuComponent，js，其中显示了一个菜单项列表，但是当我运行该应用程序时，它显示了一个空白白屏，我正努力克服这个问题，如果有人在那里我有任何想法，我将不胜感激获得空白屏幕。以下是涉及某人的所有文件，以帮助我进行指导。没有显示错误。我尝试了ios模拟器和android两者都显示空白屏幕。

谢谢。

App.js

import React from 'react';
import { StyleSheet } from 'react-native' ;
import Main from './components/MainComponent' ;

export default class App extends React.Component {
  render() {
     return (
        <Main />
     );
  }
}

MainComponent.js

import React, { Component } from 'react' ;
import Menu from './MenuComponent' ;
import { DISHES } from '../shared/dishes' ;

class Main extends Component {
       constructor(props) {
           super(props);

           this.state = {
               dishes: DISHES
           }
       }
       render() {
           return (
               <Menu dishes={this.state.dihes} />
           )
       }
}
export default Main;

MenuComponent.js

import React, { Component } from 'react' ;
import { View, FlatList } from 'react-native' ;
import { ListItem } from 'react-native-elements' ;

//import { StyleSheet } from 'react-native' ;

//functional component
function Menu(props) {
       const renderMenuItem = ({item, index}) => {
           return (
               <ListItem   
                   key={index}
                   title={item.name}
                   subtitle={item.description}
                   hideChevron={true}
                   leftAvatar={{source: require('./images/uthappizza.png') }}
                      />
           );
       };


       return (
            <FlatList 
                data= {props.dishes}
                renderItem={renderMenuItem}
                keyExtractor={Item => Item.id.toString() }
                />
            )

}



export default Menu;

Answer 1

您似乎缺少一个<View>组件来渲染子组件。

import React from 'react';
import { StyleSheet, SafeAreaView } from 'react-native';
import Main from './components/MainComponent';

export default class App extends React.Component {
  render() {
    return (
      <SafeAreaView>
        <Main />
      </SafeAreaView>
    );
  }
}

尝试使用此方法将组件树包装在<SafeAreaView>内，以确保组件也呈现在“ SafeArea”内部（“导航栏，标签栏，工具栏”等未涵盖）。https://reactnative.dev/docs/safeareaview

React Native在iPhone屏幕上未显示空白

1 个答案: