StackNavigator里面的TabNavigator - React Native

Question

我正在尝试将一个TabNavogator放在StackNavigator中，它抱怨它必须是一个反应组件。

我已附上代码和错误屏幕截图。

一旦我通过登录界面，我想要标签，所以在Login.js中点击一个按钮我正在移动到Tabs但是我认为问题出在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;

Main index.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

如果在与React组件（Tabs TabsNavigator）相同的页面中创建StackNavigator，则会显示此错误。尝试将Tabs移出到它自己的文件中。