我试图理解反应导航,并且我正在设置一个概念应用程序来理解。
首先,我遇到的是错误消息“路线“ 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,并且还导出了默认的类名“ Feed”。
这似乎是一个非常基本的错误,我在这里做错了什么?
最佳答案
好的,我找到了。
根目录中的“ Feed”路由具有“ Screen”属性,而不是“ screen”属性。
可以在屏幕前错误关闭。
关于react-native - 路线“Feed”的组件必须是React组件,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/49240212/