React Navigation v3 BottomTabNavigator Черный экран на iOS

Question

Я тестирую BottomTabNavigator от React Navigation, но после его запуска в симуляторе ios у меня появляется черный экран.

Шаги для воспроизведения:

1. Создание собственного проекта реагирования react-native init Example
2. Установка и связывание реакции-навигации и депс npm install --save react-navigation react-native-gesture-handler && react-native link react-native-gesture-handler
3. Заменить содержимое App.js на:

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

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

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

const TabNavigator = createBottomTabNavigator({
  Home: HomeScreen,
  Settings: SettingsScreen,
});

export default createAppContainer(TabNavigator);

Затем запустите в симуляторе react-native run-ios

Я также попытался удалить node_modules, собрать папки и очистить кэш npm и содержимое симулятора.

Answer 1

Если вы не получите сообщение об ошибке, это может быть связано с тем, что вы не установили цвет фона для тегов <View>.

Попробуйте:

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

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

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

    const TabNavigator = createBottomTabNavigator({
      Home: HomeScreen,
      Settings: SettingsScreen,
    });

    export default createAppContainer(TabNavigator);

Надеюсь, это поможет.