Javascript 路由应该声明一个屏幕。[反应本机导航错误]

您好，我是新的反应本机，我面临着奇怪的问题与路由。我做错了什么，但需要有人来指导我

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);

// 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,
     })
  }
}

export default class LandingScreen extends Component {
static navigationOptions = {
  title: 'Landing Screen Title',
};
render() {
  return (........)
}

app_component.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);

// 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,
     })
  }
}

export default class LandingScreen extends Component {
static navigationOptions = {
  title: 'Landing Screen Title',
};
render() {
  return (........)
}

如果我们删除路线着陆，效果很好。但是，当我们添加此路径时，会出现错误

---

路线“着陆”应声明一个屏幕。例如……

您的着陆屏幕已导出为

默认值

，但您已按名称导入

您的导入声明如下所示：

import { LandingScreen } from './src/components/landing_screen.js'

替换为下面的行（不带花括号）：

它应该能解决问题

但正如@Medet所指出的，您可能会得到一个新的错误，因为您必须更改这一行：

navigate('LandingScreen')

致：

因为您的屏幕名是Landing。

您正在调用

导航（“LandingScreen”）

但屏幕名称是

Landing

---

+@Dash的回答应该可以解决

感谢Dash的努力。问题在于进口声明。导航工作正常，因为我在这里拼错了：）