почему экран пуст при использовании реагировать родной клиент с навигацией по вкладке реагировать-навигации

Question

это не показывает, что вкладка может помочь мне, пожалуйста, мне нужна навигация по отображению вкладок в моем приложении, любая идея, которую я хочу, чтобы экран отображался нормально, потому что он мне не кажется, пожалуйста, помогите, потому что у меня проблемы

Это все страницы, используемые в приложении, пожалуйста, посмотрите это package.json

{
  "name": "alasma3y",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.3.1",
    "react-native": "0.55.4",
    "react-native-elements": "^0.19.1",
    "react-native-vector-icons": "^6.0.2",
    "react-navigation": "^2.18.0"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "babel-preset-react-native": "4.0.1",
    "jest": "23.6.0",
    "react-test-renderer": "16.3.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

это экран андроида

это домашний экран

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class HomeScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
     <Text>الهوم سكرين</Text>
     
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

});

это экран сидения

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

export default class SittingScreen extends Component {
  render() {
    return (
      <View style={styles.container}>
     <Text>Sitting</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },

});

это экран маршрута

import React from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { TabNavigator, TabBarBottom } from 'react-navigation';
import {Icon} from 'react-native-elements';
import HomeScreen from './pages/Home';
import SittingScreen from './pages/Sitting';
import Colors from './pages/colors';


export default TabNavigator(
  {
    Home: { screen: HomeScreen },
    Settings: { screen: SittingScreen },
  },
  {
    navigationOptions:({  navigation  }) => ({
      tabBarIcon:({focused , tintColor}) => {
        const {routeName} = navigation.state;
        let iconName;
          if(routeName === 'Home'){
            iconName = `ios-home${focused ? '':'-outline'}`
          }else if(routeName === 'Settings'){
            iconName = `ios-add-circle${focused ? '':'-outline'}`
          }
          return <Icon type='ionicon' name={iconName} color={tintColor} size={25} />
      }
    }),
    tabBarOptions:{
      activeTintColor: Colors.red,
      inactiveTintColor: Colors.gray,
    }
}
  
);