在功能组件之间反应原生导航？答案

【问题标题】：React Native Navigation between functional components?在功能组件之间反应原生导航？
【发布时间】：2020-01-14 13:41:12
【问题描述】：

在 Login.js 中按下登录按钮时，我试图导航到主屏幕。 LoginForm 加载完美，但是当我按下按钮时，我开始收到错误“TypeError: Undefined is not an object (evalating 'navigation.navigate')。之前这不是问题，但当我将 Login 移动到不同的组件时它发生了变化。我得到了一个不同的错误，我经历了这个但它没有解决它：Getting undefined is not an object evaluating _this.props.navigation 如果您需要整个代码，请告诉我。谢谢:)

LoginForm.js

...
import Login from "./Login";

const LoginForm = props => {
  return <Login />
}
...

Login.js

const Login = ({ navigation }) => {
 return (
  <TouchableOpacity
    style={{ marginTop: 20 }}
    activeOpacity={1}
    onPress={() => navigation.navigate("Main")}
  >
    <View style={styles.loginButtonContainer}>
      <Text style={styles.loginButtonText}>Login</Text>
    </View>
  </TouchableOpacity>
  )}
...

【问题讨论】：

当你console.log(navigation) 上面返回它记录什么？

标签： react-native react-native-navigation

【解决方案1】：

感谢 withNavigation，我修复了它。 https://reactnavigation.org/docs/en/with-navigation.html

withNavigation 是一个通过导航的高阶组件支撑成一个包装的组件。当您无法通过时，它很有用导航道具直接进入组件，或者不想传递它如果是嵌套很深的孩子。

import { withNavigation } from 'react-navigation'

const Login = ({ navigation }) => {
...
}

export default withNavigation(Login)

无论如何，如果可能的话，我很想知道如何在没有这个的情况下解决它。

【讨论】：