Материал Наверх Навигатор Закладка со статусной строкой. Есть ли способ это исправить?

Question

Как я могу получить компонент, добавленный createMaterialTopTabNavigator, чтобы выйти за пределы строки состояния? Вот мой код:

import React from 'react';
import { Text, View } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen1!</Text>
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen2!</Text>
      </View>
    );
  }
}

class Screen3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen3!</Text>
      </View>
    );
  }
}

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});

См. Перекрытие строки состояния Это мой первый родной проект, и я могу упустить что-то решающее. Любые указатели оценены.

Answer 1

Просто замените ваш View на SafeAreaView, и это должно помочь.

import { Text, SafeAreaView } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';

class Screen1 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen1!</Text>
      </View>
    );
  }
}

class Screen2 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen2!</Text>
      </View>
    );
  }
}

class Screen3 extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Screen3!</Text>
      </View>
    );
  }
}

export default createMaterialTopTabNavigator ({
  "Screen1": Screen1,
  "Screen2": Screen2,
  "Screen3": Screen3,
});