反应 - 导航：路线应宣布一个屏幕...错误

我是新的反应，导航和我遵循site上的步骤，但我得到一个错误，说'路线'聊天'应该宣布一个屏幕...下面是我的代码供参考。反应 - 导航：路线应宣布一个屏幕...错误

import React from 'react'; 
import { 
    AppRegistry, 
    Text, 
    View, 
    Button, 
} from 'react-native'; 
import { StackNavigator } from 'react-navigation'; 

class HomeScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Welcome', 
    }; 
    render() { 
    const { navigate } = this.props.navigation; 
    return (
     <View> 
     <Text>Hello, Chat App!</Text> 
     <Button 
      onPress={() => navigate('Chat')} 
      title="Chat with Lucy" 
     /> 
     </View> 
    ); 
    } 
} 

AppRegistry.registerComponent('navigationApp',() => navigationApp);

这是我认为的错误发生

const navigationApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Chat: { screen: ChatScreen }, 
}); 

class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
}

来源

2017-06-02 NSCoder

您可以测试在navigationApp上方声明ChatScreen .. –

@NeelGala谢谢，实际上工作。 – NSCoder

我面临着同样的问题，因为你太here.Well，根据我的解决方案，我所做的是我把符合：

const navigationApp = StackNavigator({ 
    Home: { screen: HomeScreen }, 
    Chat: { screen: ChatScreen }, 
});

顶部，就在AppRegistry ...行之上。它应该在index.android.js文件中。

而且不要忘了包括这条线在该文件的顶部太：

import { ChatScreen } from './App';

并根据自己所关注的教程（我相信这是一样的就是我下面在这里），你应该有一个名为'app.js'的文件;您在导入行中引用的内容。 'app.js' 的

内容：

import React from 'react'; 
import { View, Text } from 'react-native'; 
export class ChatScreen extends React.Component { 
    static navigationOptions = { 
    title: 'Chat with Lucy', 
    }; 
    render() { 
    return (
     <View> 
     <Text>Chat with Lucy</Text> 
     </View> 
    ); 
    } 
}

就是这样。但是，这取决于您使用的机器和系统。我正在使用Mac OS Sierra的MacBook Pro 10.12.6

并且react-native也是最新版本，不确定是否有更新版本（不时有更新版本）。

尝试修改一行/命令，以适合您的版本为准，并仔细阅读示例/教程。由于某些更新/不同的系统环境，可能会有一些不推荐的功能/不可用代码等。

祝你好运！

来源

2017-07-26 09:53:15 Fariz

如果您的组件或目录有index.js，请不要忘记在其中添加导出！（不，我没有做到这一点....）

关于组织一个项目一个很好的文章是和使用index.js的：Organizing a React Native Project对中

来源

2017-12-04 19:49:05

将navigationOptions到像

{screen: ScreenComponent, navigationOptions: ...your options }

来源

2017-12-30 03:04:18

反应 - 导航：路线应宣布一个屏幕...错误

回答

相关问题