React Native集成Redux与Stack Navigation报错：Route Login需声明screen

嘿，我帮你找到了问题的核心，咱们一步步来修复：

1. 最关键的问题：组件导入语法错了 #

你在Routes.js和App.js里导入Login组件的时候写了：

import { LoginComponent } from "../components/Login";

但回头看Login.js的末尾，你用的是默认导出：

export default connect(mapStateToProps)(LoginComponent)

默认导出的组件在导入时根本不需要加花括号{}！所以你得把这两处的导入语句改成：

import LoginComponent from "../components/Login";

顺便检查下ProductList的导入，如果它也是默认导出，也要做同样的修改哦。

2. 顺便给你提几个Login组件里的小坑（避免后续踩雷） #

除了导航的错误，你的Login组件还有几个潜在问题，一起改了省得以后麻烦：

• 输入框的值该存到state里：你现在在render里定义inputFormProp，每次组件渲染这个对象都会被重置，根本存不住用户输入的内容！改成这样：

  constructor(props) {
    super(props);
    this.login = this.login.bind(this)
    // 把输入值初始化到组件state里
    this.state = {
      username: '',
      password: ''
    }
  }
  

  然后更新输入框和按钮的写法：

  <FormInput value={this.state.username} onChangeText={(text) => this.setState({username: text})} />
  <FormInput value={this.state.password} onChangeText={(text) => this.setState({password: text})} />
  <Button 
    buttonStyle={{ marginTop: 20 }} 
    backgroundColor="#03A9F4" 
    title="SIGN IN" 
    onPress={() => this.login(this.state)} // 这里用箭头函数包裹，不然组件一加载就会执行login！
  />
  

• 按钮点击的写法错误：原来的onPress={this.login(inputFormProp)}会在组件渲染时立刻触发login方法，而不是用户点击按钮的时候，必须用箭头函数包起来才行。

3. 验证修复 #

改完导入语句之后，重新跑一遍应用，那个"Route Login should declare a screen"的错误肯定就没了。如果还有问题，再检查下：

• Routes.js里的每个路由是不是都正确关联了存在的组件
• 所有组件的导出和导入方式是不是匹配

内容的提问来源于stack exchange，提问作者Artyomska