Реакция родного TabNavigator не отображается

Question

Я создал базовое приложение для реагирования, которое состоит из нескольких кнопок, которые используются для визуализации различных экранов. После того, как пользователь вошел в систему, я рендерил элемент 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

Я использую следующее в качестве дополнительной конфигурации для вкладки Nav. Возможно, вы можете удалить некоторые вещи, но то, что сработало, было, по крайней мере, определить порядок.

import { TabNavigator, TabBarBottom } from 'react-navigation';

export const Tabs = TabNavigator(
  {
... Your tabs here...
  }
  {
    tabBarOptions: {
      activeTintColor: 'red',
      inactiveTintColor: 'grey',
      style: {
        backgroundColor: 'white',
        borderTopColor: 'red',
      },
      labelStyle: {
        fontSize: 12,
        fontWeight: 'normal'
      },
      indicatorStyle: {
        borderBottomColor: 'red,
        borderBottomWidth: 4,
      },
    },
    initialRouteName: 'Electric',
    order: ['Electric', 'Web', 'Water', 'OtherBills', 'Personal'],
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
  },
  {
    ...TabNavigator.Presets,
    animationEnabled: false,
    swipeEnabled: false,
    showIcon: false,
  }
};

Answer 2

В новой версии ReactNavigation размещение TabNavigator в SafeAreaView приведет к тому, что он не будет отображаться, поскольку реагирующая навигация уже обрабатывает его,

Если в вашем случае вы используете компонент SafeAreaView поверх TabNavigator, возможно, его удаление вам поможет.