Question

我正在尝试理解反应导航，我正在设置一个概念应用程序来理解。

我最初在努力的是，我收到错误消息“路由组件”SomeRoute“必须是React组件”

我知道，这意味着什么，但我不明白为什么会抛出这个错误。

我有以下设置：

App.js：

import React from 'react';
import { Root } from './config/router';
import { SafeArea } from 'react-native';
class App extends Component {
    render() {
        return <Root />;
    }
}
export default App;

router.js（config / router.js）

import React from 'react';
import { DrawerNavigator, TabNavigator, StackNavigator } from 'react-navigation';

import Feed from './../components/Feed';
import Search from './../components/Search';
import Favorites from './../components/Favorites';

import TextList from './../components/ComingSoon';
import Detail from './../components/Detail';
import Downloads from './../components/Downloads';

export const FeedStack = StackNavigator({

    Feed: {
        screen: Feed,
        navigationOptions: {
            title: 'Machines'
        }
    },
    List: {
        screen: TextList,
        navigationOptions: {
            title: 'List View'
        }
    },
    Detail: {
        screen: Detail,
        navigationOptions: {
            title: 'Detail'
        }
    }
});


export const TabStack = TabNavigator({
    Dashboard: {
        screen: FeedStack,
        navigationOptions: {
            title: 'Dashboard'
        }
    },
    Search: {
        screen: Search,
        navigationOptions: {
            title: 'Search'
        }
    },
    Favorites: {
        screen: Favorites,
        navigationOptions: {
            title: 'Favorites'
        }
    }
});


export const DownloadStack = StackNavigator({
    Downloads: {
        screen: Downloads,
        navigationOptions: {
            title: 'Downloads'
        }
    }
});

export const Root = DrawerNavigator({
    Feed: {
        Screen: TabStack,
        navigationOptions: {
            title: 'Machines'
        }
    },
    Downloads: {
        screen: DownloadStack
    }
});

和Feed.js（components / Feed.js）

import React from 'react';

import { View, Text } from 'react-native';

class Feed extends React.Component {

    render() {
        return (
            <View>
                <Text>Hallo Feed Soon</Text>
            </View>
        );
    }
}

export default Feed;

正如我所看到的，Feed正在扩展React.Component并导出默认的Classname“Feed”。

这似乎是一个非常基本的错误，我在这里做错了什么？

Answer 1

好的，我找到了。

路线＆＃34; Feed＆＃34;在Root中有一个＆＃34; Screen＆＃34;财产而不是＆＃34;屏幕＆＃34;属性。

可以通过屏幕前面的错误关闭。

Answer 2

如果使用反应本机路由器流量，则可能是使用错误的导出语法的问题。

导出的常用语法：

  export {ComponentName};

或者这个：

  export default ComponentName;

它应该是（当使用react-native-router-flux

module.exports = ComponentName;

路径“Feed”的组件必须是React组件

2 个答案: