StackNavigator 中的 TabNavigator - React Native

Question

我试图将 TabNavogator 放在 StackNavigator 中，但它抱怨说它必须是一个 React 组件。

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

一旦我通过登录屏幕我想要标签，所以在 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;

主要index.js（仅供参考）

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

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

Answer 2

在router.js中，将Tabs变量的声明和初始化放在Root的初始化之上。您当前在声明变量之前正在使用它。我认为这应该可以解决问题。

StackNavigator 中的 TabNavigator - React Native

TabNavigator inside StackNavigator - React Native

android

react-native

stack-navigator

react-native-tabnavigator