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

Question

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

My 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, без 'Screen' в ../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 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)