我目前正在使用 React Native 和新的 React Navigation。我正在尝试关注 tutorial for nesting navigators ,但总是报错:
Route 'Home' should declare a screen. For example:
import MyScreen from './MyScreen';
...
Home: {
screen: MyScreen,
}
我不确定我做错了什么。当我单独启动导航器时,它们会工作。但不幸的是没有合并。
这是我使用教程创建的 App.js:
import React from 'react';
import {
AppRegistry,
Text,
View,
Button
} from 'react-native';
import {
StackNavigator,
TabNavigator
} from 'react-navigation';
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'Welcome',
};
render() {
const { navigate } = this.props.navigation;
return <View>
<Text>Hello!</Text>
<Button
onPress={() => this.props.navigation.navigate('Chat', { user: 'Daniel' })}
title="ReactNavigation Test"
/>
</View>;
}
}
class ChatScreen extends React.Component {
static navigationOptions = {
title: 'ReactNavigation Test',
};
render() {
const { params } = this.props.navigation.state;
return (
<View>
<Text>Neue Seite für den Navigator. Hallo {params.user}!</Text>
</View>
);
}
}
class RecentChatsScreen extends React.Component {
render() {
return <Text>List of recent chats</Text>
}
}
class AllContactsScreen extends React.Component {
render() {
return <Text>List of all contacts</Text>
}
}
const ReactNativeTest = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
AppRegistry.registerComponent('ReactNativeTest', () => ReactNativeTest);
也许你可以帮我。我问了同样的问题here , 但也许这是提出问题的更好地方。
提前致谢!
最佳答案
我刚开始的时候也犯过这个错误......
将 MainScreenNavigator
放在 ReactNativeTest
之上。
正如您目前所拥有的那样,MainScreenNavigator 在被调用时并不存在。
const MainScreenNavigator = TabNavigator({
Recent: { screen: RecentChatsScreen },
All: { screen: AllContactsScreen },
});
const ReactNativeTest = StackNavigator({
Home: { screen: MainScreenNavigator },
Chat: { screen: ChatScreen },
});
关于javascript - 使用 React Navigators 嵌套导航器 - 'Home' 应该声明一个屏幕,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42596714/