1

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

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

一旦我通过登录屏幕，我想要选项卡，所以在 Login.js 中单击一个按钮，我将移至选项卡，但我认为问题出在 router.js 中，我可能做错了。

如果您能建议如何纠正它，那将非常有帮助

谢谢R

路由器.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);

我想从登录屏幕移到选项卡。

登录.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;

这是我的错误信息

在此处输入图像描述

4

2 回答 2

1

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

于 2018-06-07T19:00:12.640 回答
0

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

于 2018-06-07T16:33:47.577 回答