路由应该声明一个屏幕。 [反应原生导航错误]
问题描述:
嗨,我是新的反应原生,我面临与路由奇怪的问题。我做错了什么,但需要有人来指导我。路由应该声明一个屏幕。 [反应原生导航错误]
index.android.js
import { LandingScreen } from './src/components/landing_screen.js'
import HomeScreen from './src/app_component.js'
import { StackNavigator } from 'react-navigation';
const SimpleApp = StackNavigator({
Home: { screen: HomeScreen },
Landing: { screen: LandingScreen},
});
AppRegistry.registerComponent('HomeScreen',() => SimpleApp);
app_component.js
// Other imports ...
export default class HomeScreen extends Component {
static navigationOptions = {
title: 'Home Screen',
};
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}> Hello CHannoo!!!</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Double tap R on your keyboard to reload,{'\n'}
Shake or press menu button for dev menu
</Text>
<Button
title="Go to 2nd Page"
onPress={() =>
// alert('hello');
navigate('LandingScreen')
// navigate('Home', { name: 'Jane' })
}
/>
</View>
);
}
componentDidMount() {
SplashScreen.close({
animationType: SplashScreen.animationType.scale,
duration: 850,
delay: 500,
})
}
}
landing_screen.js
export default class LandingScreen extends Component {
static navigationOptions = {
title: 'Landing Screen Title',
};
render() {
return (........)
}
它如果我们删除路线登陆工作正常。但是当我们添加这条路线时,我们会得到错误
Route'Landing'应该声明一个屏幕。例如......
答
您的LandingScreen已导出为default
,但您是按名称导入的。
你的import语句是这样的:
import { LandingScreen } from './src/components/landing_screen.js'
低于线(没有大括号)替换它:
import LandingScreen from './src/components/landing_screen.js'
应该解决的问题。
但你可能会得到一个新的错误作为@Medet指出,因为你必须要改变这一行:
navigate('LandingScreen')
到:
navigate('Landing')
因为你的网名登陆。
答
你叫navigate('LandingScreen')
但网名是Landing
+ @黄昏的答案应该解决
感谢黄昏奏效。 问题在于import语句。导航工作正常,因为我在这里拼写错了:) –