React Native Flex: 1 Не заполняет весь экран

Question

Я попытался заполнить весь экран черным, используя flex: 1. но результат такой:

  <View
    style={{
      flex: 1,
      backgroundColor: 'black',
    }}
  />

Я также пытался используя:

   height: '100%',
   width: '100%',

и

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

, но результат остается тем же.

Есть ли способ полностью заполнить весь экран?

Answer 1

Попробуйте, если вы используете реагирующую навигацию

const ReactNavigation = require('react-navigation');
ReactNavigation.SafeAreaView.setStatusBarHeight(0);

или

navigationOptions: {
  headerForceInset: {top: 'never'},
}

Answer 2

Первый импорт:

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

Измените макет на:

<StatusBar backgroundColor="black" barStyle="white-content"/>
<SafeAreaView 
    style={{
        flex: 1,
        backgroundColor: 'black',
    }}
>
      <View>...</View>
</SafeAreaView>

Answer 3

Оборачиваете ли вы свое приложение в безопасном виде, в любом случае вы можете использовать процентную ширину и высоту, чтобы заполнить весь экран, если flex: 1 не работает.

style = {{ width:'100%', height:'100%' }}

Answer 4

Если вы дали заполнение родительского представления, удалите его. Может быть, это работает, и ваша функция рендеринга должна быть такой.

render() {
  return (
   <View style={{ flex: 1, backgroundColor: 'black'}} />
  )
}

Answer 5

Вы можете использовать Dimensions.get ('window'), чтобы получить полную высоту и ширину экрана.

объявить const

const HEIGHT = Dimensions.get('window').height;
const WIDTH = Dimensions.get('window').width;

, затем использовать это внутри стиля

style = {{
            height = HEIGHT,
            width = WIDTH,
            backgroundColor = 'black',
        }}