Блог

Я создал приложение React Native с помощью интерфейса командной строки React Native. Он App.tsx имеет следующее содержание:

 import React from "react";
import {
  StyleSheet,
  Text,
} from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";


const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello React</Text>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({

});

export default App;
 

Приложение очень простое, оно показывает только Hello React .
Что меня беспокоит, так это серая громада наверху:

и я не знаю, откуда это берется.

Мое виртуальное устройство:

Версия React Native 0.65.

Не могли бы вы, пожалуйста, сказать мне, откуда берется серая громада?

Репозиторий размещен на https://github.com/softshipper/GrayBulk.

Обновить

Я изменил App компонент на:

 import React from "react";
import {
  StyleSheet,
  View,
} from "react-native";


import { SafeAreaView } from "react-native-safe-area-context";

const App = () => {
  return (
    <SafeAreaView style={{ flex: 1, backgroundColor: "red" }}>
      <View style={{ flex: 1, backgroundColor: "blue" }} />
    </SafeAreaView>
  )
}

const styles = StyleSheet.create({

});

export default App;
 

и серая громада все еще появляется:

Измените SafeAreaView и измените его на Вид, чтобы удалить границы, а затем дайте компоненту flex: 1, затем paddingTop: 25 и цвет фона: белый.