React native 如何在单击按钮时使用react导航更改react native中的屏幕？

我已经在我的根组件（App.js）中定义了我的所有路线/导航，并且正在尝试单击按钮从子组件（LoginScreen）访问其中一个屏幕（UserScreen）

这是我的App.js

import React from 'react';
import { StyleSheet, Text, View, TextInput, TouchableHighlight, Button } from 'react-native';
import LoginComponent from './components/LoginComponent';
import { StackNavigator } from 'react-navigation';


class MainWelcome extends React.Component {
 render() {
   return (
    <View>
     <Text>Welcome Page</Text>
    <Button
      title="Login"
      onPress={() => this.props.navigation.navigate('Login')}
    />
  </View>
  );
 }
}

class LoginScreen extends React.Component {
 render() {
  return (
   <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
     <LoginComponent />
   </View>
  );
 }
}

class UserScreen extends React.Component {
 render() {
  return (
  <View>
    <Text>Details Screen</Text>
  </View>
  );
 }
}

 const RootStack = StackNavigator(
  {
  Register: {
   screen: RegisterScreen,
  },
  Login: {
   screen: LoginScreen,
  },
  UserPage: {
   screen: UserScreen,
  },
  Welcome: {
   screen: MainWelcome,
  },
 },
{
  initialRouteName: 'Welcome',
 }
);

export default class App extends React.Component {
  render() {
    return (
     <RootStack />
   );
  }
 }

从“React”导入React；
从“react native”导入{样式表、文本、视图、文本输入、TouchableHighlight、按钮}；
从“./components/LoginComponent”导入LoginComponent；
从“react navigation”导入{StackNavigator}；
类main扩展了React.Component{
render（）{
返回(
欢迎页面
this.props.navigation.navigate（'Login'）}
/>
);
}
}
类LoginScreen扩展了React.Component{
render（）{
返回(
);
}
}
类UserScreen扩展了React.Component{
render（）{
返回(
详细信息屏幕
);
}
}
const RootStack=StackNavigator(
{
登记册：{
屏幕：注册表屏幕，
},
登录：{
屏幕：登录屏幕，
},
用户页：{
屏幕：用户屏幕，
},
欢迎:{
屏幕：欢迎光临，
},
},
{
initialRouteName:“欢迎”，
}
);
导出默认类App扩展React.Component{
render（）{
返回(
);
}
}

这是我的LoginComponent.js

  import React from 'react';
  import { StyleSheet, Text, View, TouchableHighlight, TextInput, StackNavigator } from 'react-native';

  class LoginComponent extends React.Component {
   constructor(){
    super();
        this.state = {
                loginusername: '',
                loginpassword: '',
                isloggedin: false,
                loggedinuser: null,
        }  
      }

  render() {
   return (
    <View>
      <Text>Please Log In</Text>
    <View>
       <TextInput
           placeholder="USERNAME"
           placeholderTextColor = 'black'
           onChangeText={(loginusername) => this.setState({loginusername})}
            />
      <TextInput
                placeholder="Password"
                placeholderTextColor = 'black'
                onChangeText={(loginpassword) => this.setState({loginpassword})}
            />
      <TouchableHighlight onPress={() => {
        {this.props.navigation.navigate('UserPage')}
        }
      }>
      <View>
      <Text>Login</Text>
      </View>
    </TouchableHighlight>
    </View>  
  </View>
  );
 }
}

export default LoginComponent;

从“React”导入React；
从“react native”导入{样式表、文本、视图、TouchableHighlight、TextInput、StackNavigator}；
类LoginComponent扩展了React.Component{
构造函数（）{
超级（）；
此.state={
loginusername:“”，
登录密码：“”，
伊斯洛格丁：错，
loggedinuser:null，
}  
}
render（）{
返回(
请登录
this.setState（{loginusername}）
/>
this.setState（{loginpassword}）}
/>
{
{this.props.navigation.navigate（'UserPage'）}
}
}>
登录
);
}
}
导出默认登录组件；

---

在LoginComponent.js中，我正在执行

{this.props.navigation.navigate（'UserPage'）}

以在单击按钮时重定向到用户屏幕，但它显示

TypeError:undefined不是对象（评估'this.props.navigation.navigate'）

。我不确定我做错了什么，如果我应该将一些东西从App.js传递到LoginComponent.js。

如果你试图打印你的LoginComponent的道具，你将一无所获！， 但是，如果像这样将导航作为道具传递给组件会怎么样呢！：

// App.js
class LoginScreen extends React.Component {
...
<LoginComponent navigation={this.props.navigation}/>
...
}

//App.js
类LoginScreen扩展了React.Component{
...
...
}

您将最终获得功能导航道具

---

快乐用户详细信息导航：）

如果您试图打印LoginComponent的道具，您将一无所获！， 但是，如果像这样将导航作为道具传递给组件会怎么样呢！：

// App.js
class LoginScreen extends React.Component {
...
<LoginComponent navigation={this.props.navigation}/>
...
}

//App.js
类LoginScreen扩展了React.Component{
...
...
}

您将最终获得功能导航道具

快乐用户详细信息导航：）