Собственный React - Stack Navigation и TabNavigation (компонент для маршрута должен быть компонентом React) - PullRequest
Новая
       100

Собственный React - Stack Navigation и TabNavigation (компонент для маршрута должен быть компонентом React)

0 голосов
/ 16 мая 2018

Я пытаюсь создать StackNavigator, который может перемещаться в TabNavigator.Но есть ошибка, говорящая;«Компонент для маршрута должен быть компонентом React».

TabNav - это не папка с файлами, я просто хочу вызвать ее после входа пользователя.Так что вкладки будут отображаться я думаю.А также, я просто следую учебнику, чтобы сделать это.Извините, ребята, я только новичок.

Снимок экрана

Вот мой код

App.js 

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import Login from './components/Login';
import ManageOrder from './components/ManageOrder';
import SpecialOrder from './components/SpecialOrder';
import categories from './components/categories';

export default class App extends Component {
  render() {
    return (
      <RootNav />
    );
  }
}

const RootNav = StackNavigator({
  Login: {
    screen: Login,
  },
  TabNav: { screen: TabNav },

});

const TabNav = TabNavigator({
  categories: {
    screen: categories,
  },
  ManageOrder: {
    screen: ManageOrder
  },
  SpecialOrder: {
    screen: SpecialOrder
  },
});

Ответы [ 3 ]

0 голосов
/ 16 мая 2018

Вы должны объявить все компоненты перед вызовом их для проверки перед вызовом навигации по вкладке из стека. Вы должны объявить const табуляции, сначала посмотрите код ниже 

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, View, } from 'react-native';
import { StackNavigator, TabNavigator } from 'react-navigation';

import categories from './components/categories';
import ManageOrder from './components/ManageOrder';
import SpecialOrder from './components/SpecialOrder';
import Login from './components/Login';

const TabNav = TabNavigator({
  categories: {
    screen: categories,
  },
  ManageOrder: {
    screen: ManageOrder
  },
  SpecialOrder: {
    screen: SpecialOrder
  },
});

const RootNav = StackNavigator({
  Login: {
    screen: Login,
  },
  TabNav: { screen: TabNav },
});

Это должно работать

0 голосов
/ 29 июля 2018

Возможно, проблема связана с обновленным API версии 2 реагирующей навигации. TabNavigator и StackNavigator должны быть заменены на createTabNavigator и createStackNavigator.Я сделал ту же ошибку, начав смотреть учебник.

v2 API: https://reactnavigation.org/docs/en/hello-react-navigation.html

0 голосов
/ 16 мая 2018

Я думаю, проблема в том, что вы не экспортируете ни одного компонента. Пожалуйста, отметьте его

...