React-Native навигация не отображается?

Question

Я пытался реализовать React-native-навигацию в своем приложении и, похоже, не могу заставить ее работать.

Мой App.js:

import React from 'react';
import Navigator from './src/components/Navigator'


class App extends React.Component {

  render() {
    return (
      <React.Fragment>
        <Navigator />
      </React.Fragment>
    );
  }
}

export default App;

и мой Navigator.js

import React, { Component } from 'react';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import LoginScreen from '../screens/Login';
import HomeScreen from '../screens/Homescreen'
import Icon from 'react-native-vector-icons/Ionicons';
import App from '../../App';

 export default Navigator = () => createMaterialBottomTabNavigator(
  {
    LoginScreen: {
      screen: LoginScreen,
      navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={23} name={(focused ? 'ios-home' : 'ios-home-outline')} style={{ color: tintColor }} />
        ),
      }

  },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon size={23} name={(focused ? 'ios-stats' : 'ios-stats-outline')} style={{ color: tintColor }} />
        )
      }
    },
  },

  {
    shifting: false,
    backBehavior: "initialRoute",
    initialRouteName: "LoginScreen",
    activeColor: 'white',
    tabBarColor: 'blue',
    inactiveTintColor: 'black',
    barStyle: { backgroundColor: 'orange'},
    swipeEnabled: true,
  }
);

Прямо сейчас приложение загружается и получает доступ к моему App.js. Тем не менее, кажется, что ничего не отображается из моего навигатора. Я знаю, что он находит это, потому что у меня были ошибки пути и такие исправления в нем.

Какой очевидный недостаток я упускаю?

Answer 1

Здесь может быть некоторая путаница между двумя разными проектами. То, что вы пытаетесь реализовать, из React Navigation. React Native Navigation, отдельный проект от Wix, также существует.

Есть несколько несоответствий в вашем импорте, которые заставляют меня подозревать, что импорт терпит неудачу (нет заглавной буквы 'S' в ../screens/Homescreenнет экрана в ../screens/Login). И вы должны удалить App импортировать в Navigator,

Вот рабочий пример, основанный на некоторых предположениях о том, чего вы пытаетесь достичь. Обратите внимание, что для последней версии react-navigation-material-bottom-tabs Мне нужно было добавить зависимости:

@react-navigation/core
@react-navigation/native
react-native-paper
react-native-screens

YMMV. Я тестировал с новым, голым react-native init приложение. Мне также нужно было использовать React Navigation's createAppContainer,

import React from 'react'
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs'
import { createAppContainer } from '@react-navigation/native'
import Icon from 'react-native-vector-icons/Ionicons'

import LoginScreen from '../screens/LoginScreen'
import HomeScreen from '../screens/HomeScreen'

const Navigator = createMaterialBottomTabNavigator(
  {
    Login: {
      screen: LoginScreen,
      navigationOptions: {
        tabBarLabel: 'Login',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            size={23}
            name={focused ? 'ios-home' : 'ios-home-outline'}
            style={{ color: tintColor }}
          />
        )
      }
    },
    Home: {
      screen: HomeScreen,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor, focused }) => (
          <Icon
            size={23}
            name={focused ? 'ios-stats' : 'ios-stats-outline'}
            style={{ color: tintColor }}
          />
        )
      }
    }
  },

  {
    shifting: false,
    backBehavior: 'initialRoute',
    initialRouteName: 'Login',
    activeColor: 'white',
    tabBarColor: 'blue',
    inactiveTintColor: 'black',
    barStyle: { backgroundColor: 'orange' },
    swipeEnabled: true
  }
)

export default createAppContainer(Navigator)