React native undefined不是对象（评估'；"this2.props.navigation.navigate'；"）-反应本机

我很难用一个简单的按钮在屏幕上导航。 这是我的App.js

export default class App extends Component<Props> {
  render() {
    return (
      <AppStackNavigator/>
    );
  }
}
const AppStackNavigator = StackNavigator({
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen },

      },{
        navigationOptions: {
          gesturesEnabled:false
        }
      })

导出默认类应用程序扩展组件{
render（）{
返回(
App.js
import React，{Component}来自“React”；
从“react native”导入{Text，View}；
从“/AppStackNavigator”导入AppStackNavigator；
导出默认类应用程序扩展组件{
render（）{
返回；
}
}

AppStackNavigator
import React，{Component}来自“React”；
从“react navigation”导入{StackNavigator}；
从“react native”导入{View，Text，TouchableOpacity}；
const LoginScreen=props=>(
);
常量主屏幕=（）=>(
家
);
const Login=props=>(
{
道具。导航。导航（“主页”）；
}}
>
从登录到主页
);
导出默认值（AppStackNavigator=StackNavigator(
{
登录：{screen:LoginScreen}，
主屏幕：{屏幕：主屏幕}
},
{
headerMode:“无”，
导航选项：{
已启用的手势：false
}
}
));
App.js
import React，{Component}来自“React”；
从“react native”导入{Text，View}；
从“/AppStackNavigator”导入AppStackNavigator；
导出默认类应用程序扩展组件{
render（）{
返回；
}
}

AppStackNavigator
import React，{Component}来自“React”；
从“react navigation”导入{StackNavigator}；
从“react native”导入{View，Text，TouchableOpacity}；
const LoginScreen=props=>(
);
常量主屏幕=（）=>(
家
);
const Login=props=>(
{
道具。导航。导航（“主页”）；
}}
>
从登录到主页
);
导出默认值（AppStackNavigator=StackNavigator(
{
登录：{screen:LoginScreen}，
主屏幕：{屏幕：主屏幕}
},
{
headerMode:“无”，
导航选项：{
已启用的手势：false
}
}
));
在
LoginScreen.js
中的
Login
添加导航道具，因为
LoginScreen
有导航道具
但
登录
没有

   render(){
        return (
            <View>
                <Login navigation ={this.props.navigation}>
                </Login>
            </View>
        );
    }

render（）{
返回(
);
}
在
LoginScreen.js
中的
Login
添加导航道具，因为
LoginScreen
有导航道具
但
登录
没有

   render(){
        return (
            <View>
                <Login navigation ={this.props.navigation}>
                </Login>
            </View>
        );
    }

render（）{
返回(
);
}
您需要访问组件中的导航道具。请查看官方指南


从“React”导入React；
从“react native”导入{Button}；
从“react navigation”导入{withNavigation}；
类MyBackButton扩展了React.Component{
render（）{
返回{this.props.navigation.goBack（）}}/>；
}
}
//withNavigation返回包装MyBackButton并传入的组件
//导航道具
使用导航导出默认值（MyBackButton）；
您需要访问组件中的导航道具。请查看官方指南


从“React”导入React；
从“react native”导入{Button}；
从“react navigation”导入{withNavigation}；
类MyBackButton扩展了React.Component{
render（）{
返回{this.props.navigation.goBack（）}}/>；
}
}
//withNavigation返回包装MyBackButton并传入的组件
//导航道具
使用导航导出默认值（MyBackButton）；
尝试在login.js中添加构造函数
构造函数（道具）{super（道具）}
尝试在login.js中添加构造函数
构造函数（道具）{super（道具）}
我将此添加到LoginScreen中，但仍然没有更改，我也厌倦了将构造函数添加到Login.js中。同样的错误不断出现。我已经编辑了我的答案，你能检查一下是否有帮助吗？@liamrambottomno我一直收到同样的错误。我想问题出在Login.js文件中，模拟器将我指向onPress函数。i have编辑了上面的问题以添加模拟器屏幕用@Ian Zhong提到的以下代码替换你的LoginScreen.js渲染-ThanksI尝试去掉Login.js中的按钮，并具有如下touchableOpacity。我将其添加到LoginScreen中，但仍然没有更改，我也尝试将构造函数添加到Login.js中。同样的错误仍然存在接下来，我已经编辑了我的答案，你能检查一下是否有帮助吗？@liamrambottomno我一直收到相同的错误。我认为问题出在Login.js文件中，仿真器将我指向onPress函数。我已经编辑了上面的问题以添加仿真器屏幕用@Ian Zhong提到的以下代码替换你的LoginScreen.js渲染-ThanksI尝试去掉Login.js中的按钮，并具有如下touchableOpacity。
import React, { Component } from "react";
import { Text, View } from "react-native";
import AppStackNavigator from "./AppStackNavigator";

export default class App extends Component<Props> {
  render() {
    return <AppStackNavigator />;
  }
}

    import React, { Component } from "react";
import { StackNavigator } from "react-navigation";
import { View, Text, TouchableOpacity } from "react-native";

const LoginScreen = props => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Login navigation={props.navigation} />
  </View>
);

const HomeScreen = () => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <Text>Home</Text>
  </View>
);

const Login = props => (
  <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
    <TouchableOpacity
      onPress={() => {
        props.navigation.navigate("Home");
      }}
    >
      <Text>GO to home from login</Text>
    </TouchableOpacity>
  </View>
);

export default (AppStackNavigator = StackNavigator(
  {
    Login: { screen: LoginScreen },
    Home: { screen: HomeScreen }
  },
  {
    headerMode: "none",
    navigationOptions: {
      gesturesEnabled: false
    }
  }
));

   render(){
        return (
            <View>
                <Login navigation ={this.props.navigation}>
                </Login>
            </View>
        );
    }

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
   return <Button title="Back" onPress={() => { this.props.navigation.goBack() }} />;
 }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);