在方形框下反应本机布局

Question

我今天才刚刚开始工作，当我从模拟器中卸载应用程序并使用“ react-native run-android”重新安装它时，布局看起来确实很奇怪，我的意思是整个应用程序都放在小框中（也许50 x 50尺寸），但在android studio布局中检查显示出理想的UI。如何克服这个问题？我已附上该应用程序的屏幕截图。

配置文件-

{
  "name": "App Name",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-community/cli-platform-android": "^2.9.0",
    "@react-native-community/netinfo": "^4.4.0",
    "react": "16.9.0",
    "react-native": "0.61.4",
    "react-native-admob": "^2.0.0-beta.6",
    "react-native-gesture-handler": "^1.5.0",
    "react-native-get-music-files": "^2.1.0",
    "react-native-music-control": "^0.10.7",
    "react-native-onesignal": "^3.5.0",
    "react-native-slider": "^0.11.0",
    "react-native-vector-icons": "^6.6.0",
    "react-native-video": "^5.0.2",
    "react-navigation": "^3.1.5",
    "recyclerlistview": "^2.0.12",
    "rn-fetch-blob": "^0.11.2"
  },
  "devDependencies": {
    "@babel/core": "7.6.4",
    "@babel/runtime": "7.6.3",
    "@react-native-community/eslint-config": "0.0.3",
    "babel-jest": "24.9.0",
    "eslint": "6.5.1",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

App.js

import React, {Component} from 'react';
import Drawer from './src/navigators/drawer-navigator';
import OneSignal from 'react-native-onesignal';

export default class App extends React.Component {

    render() {
        return (
            <Drawer/>
        );
    }
}

drawer-navigator.js

import React from "react";
import {createDrawerNavigator, createAppContainer} from "react-navigation";
import BottomTabNavigator from "./bottom-tab-navigator";
import {SettingsNavigator} from "./screen-stack-navigators";
import SideMenu from "./SideMenu";

const DrawerNavigator = createDrawerNavigator({
    Home: BottomTabNavigator,
    Settings: SettingsNavigator,
}, {
    drawerBackgroundColor: 'rgb(25,25,25)',
    overlayColor: 'rgba(0,0,0,.62)',
    contentOptions: {
        inactiveTintColor: '#fff',
        activeTintColor: '#e14849'
    },
    contentComponent: SideMenu,
});

const Drawer = createAppContainer(DrawerNavigator);

export default Drawer;

初始组件代码-

import React, {Component} from 'react';
import {
    View,
    StyleSheet,
    ActivityIndicator,
    Image,
    TouchableHighlight,
    Text,
    Modal,
    PermissionsAndroid
} from 'react-native';
import {RecyclerListView, DataProvider} from 'recyclerlistview';
import {LayoutUtil} from './utils/LayoutUtil';
import Ionicons from "react-native-vector-icons/Ionicons";
import {HeaderTitleName, MenuButton, SearchButton} from "../components/header/Header";
import Player from "../player/Player";
import RNFetchBlob from 'rn-fetch-blob'
import MusicControl from "react-native-music-control";
import {AdMobBanner} from "react-native-admob";

export class HomeScreen extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Text style={{color: 'red'}}>Testing Purpose only!!!</Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'stretch',
        justifyContent: 'space-between',
        backgroundColor: 'black'
    } 
});

屏幕截图-

Android Studio布局检查屏幕截图-