reactjs - react native TabNavigator 不显示

Question

我创建了一个基本的 react-native 应用程序，它由几个用于呈现不同屏幕的按钮组成。用户登录后，我呈现了一个 TabNavigator 项目，但由于某种原因，没有出现任何选项卡，屏幕完全空白。我没有任何运气就将我的代码与其他人进行了比较。有什么建议吗？

import React from 'react';
import { StyleSheet, Text, View, Image, Button, ImageBackground } from 'react-native';
import { TabNavigator } from 'react-navigation';

import {Electric} from './Sub-bills/Electric';
import {Web} from './Sub-bills/WebBill';
import {Water} from './Sub-bills/Water';
import {OtherBills} from './Sub-bills/OtherBills';
import {Personal} from './Sub-bills/Personal';

export const Tabs = TabNavigator(
    {
        Electric: {
            screen: Electric,
            navigationOptions: {
                tabBarLabel: 'Electric'
            }
        },
        Web: {
            screen: Web,
            navigationOptions: {
                tabBarLabel: 'Web'
            }
        },
        Water: {
            screen: Water,
            navigationOptions: {
                tabBarLabel: 'Water'
            }
        },
        OtherBills: {
            screen: OtherBills,
            navigationOptions: {
                tabBarLabel: 'Other'
            }
        },
        Personal: {
            screen: Personal,
            navigationOptions: {
                tabBarLabel: 'Personal'
            }
        }
    },
);

export class HouseholdBills extends React.Component{
    render(){
        return ( 
        <Tabs />
        );
    }
}

const styles = StyleSheet.create({
    container: {
      width: '100%',
      height: '100%',
      backgroundColor:'transparent',
      justifyContent: 'center',
      alignItems: 'center',
      position: 'absolute'
    },
  });

一个组件通过按下一个按钮来渲染

Answer 1

在新版本的 ReactNavigation 中，将 TabNavigator 放在 SafeAreaView 下会导致它不显示，因为 React Navigation 已经在处理它，

如果在您的情况下，您在 TabNavigator 之上使用 SafeAreaView 组件，也许删除它会对您有所帮助。