反应 - 导航:路线应宣布一个屏幕...错误
问题描述:
我是新的反应,导航和我遵循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>
);
}
}
答
我面临着同样的问题,因为你太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也是最新版本,不确定是否有更新版本(不时有更新版本)。
尝试修改一行/命令,以适合您的版本为准,并仔细阅读示例/教程。由于某些更新/不同的系统环境,可能会有一些不推荐的功能/不可用代码等。
祝你好运!
答
如果您的组件或目录有index.js,请不要忘记在其中添加导出! (不,我没有做到这一点....)
关于组织一个项目一个很好的文章是和使用index.js的:Organizing a React Native Project对中
答
将navigationOptions
到像
{screen: ScreenComponent, navigationOptions: ...your options }
您可以测试在navigationApp上方声明ChatScreen .. –
@NeelGala谢谢,实际上工作。 – NSCoder