TabNavigator внутри StackNavigator - React Native

Question

Я пытаюсь поместить TabNavogator в StackNavigator, и он жалуется, что он должен быть компонентом реакции.

Я прикрепил код и снимок экрана с ошибкой.

Один разЯ пропускаю экран входа в систему и хочу вкладки, поэтому в Login.js по нажатию кнопки я перехожу на вкладки, но я думаю, что проблема в router.js, где я мог делать это неправильно.

Это было быбыло бы очень полезно, если бы вы могли предложить, как исправить это

Спасибо R

router.js

 import React from 'react';
import { TabNavigator, StackNavigator } from 'react-navigation';
import Login from '../../scripts/components/pages/Login';
import WalkThrough from '../../scripts/components/pages/WalkThrough';
import Transactions from '../../scripts/components/pages/Transactions';
import UserProfile from '../../scripts/components/pages/UserProfile';


export const Root = StackNavigator({          
    WalkThrough: {
      screen: WalkThrough,
      navigationOptions:{
        title: 'WalkThrough',
      },
    },    
    Login:{
      screen: Login,
      navigationOptions: {
        title: 'Login',
      },
    },
    Tabs: {
      screen: Tabs,
    }, 
  }, {
    mode: 'modal',
    headerMode: 'screen',
  });

  export const Tabs = TabNavigator({
    Transactions: {
      screen: Transactions,
      navigationOptions: {
        tabBarLabel: 'Transactions',
        tabBarIcon: ({ tintColor }) => <Icon name="list" size={35} color={tintColor} />,
      },
    },
    Profile: {
      screen: UserProfile,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => <Icon name="account-circle" size={35} color={tintColor} />
      },
    },
  });

index.js

import React, {Component} from 'react';
import {Root} from './config/router';

class App extends Component{
    render(){
        return <Root/>;
    }
}

export default App;

Mainindex.js (FYI)

import { AppRegistry } from 'react-native';
import app from './app/index';
AppRegistry.registerComponent('DoPayRetail', () => app);

И с экрана входа в систему я хочу перейти на вкладки.

Login.js

import React, {Component} from 'react';
import { StyleSheet, Text, View, Button } from 'react-native';

class Login extends Component{

    goToNext = () => {
      this.props.navigation.navigate('Tabs');
    };

    render(){
      const {navigate } = this.props.navigation;
      return (
        <View style = {styles.container}> 
          <Text> Login screen
          </Text>
          <Button
            onPress={this.goToNext}
            title="Go to next page"
            color="#841584"
          />
        </View>
      );
    }
  }

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
    },
  });

  export default Login;

Это мое сообщение об ошибке

Answer 1

В router.js поместите объявление и инициализацию переменной Tabs выше инициализации Root.В настоящее время вы используете переменную, прежде чем объявить ее.Я думаю, что это должно решить проблему.

Answer 2

Если вы создадите StackNavigator на той же странице, что и компонент React (ваш TabsNavigator с вкладками), появится эта ошибка.Попробуйте переместить вкладки в отдельный файл.