如何使用堆栈导航器通过按一下按钮从一个屏幕导航到另一个屏幕？

Question

I am looking to navigate from my login screen to my registration screen when a touchable opacity style button is pressed. I also want to set the initial screen to the login screen. However, I either get errors or unintended behavior when trying solutions that have worked for others. Below is part of my LoginForm class which is where the button is pressed.

import React, {Component} from 'react';
import { StyleSheet, View, TextInput, TouchableOpacity, Text} from 'react-native
';

export default class LoginForm extends Component {
    startRegistration() {
            this.props.navigation.navigate('Registration');
    }

<TouchableOpacity onPress={this.startRegistration} style={style
s.buttonRegister}>
           <Text style={styles.buttonText}>REGISTER</Text>
</TouchableOpacity>

When the registration button is presses it invokes the startRegistration function. Here is my App.js class:

import React, {Component} from "react";
import {createStackNavigator, createAppContainer} from "react-navigation";

import Login from './src/components/login/Login';
import Registration from './src/components/login/Registration';

export default class FastAttendance extends Component {
        render() {
                return <AppContainer />
        }
}

const AppNavigator = createStackNavigator({
        Login: {screen: Login},
        Registration: {screen: Registration},
},
{
        initialRouteName: 'Login',
}
);

const AppContainer = createAppContainer(AppNavigator);

When I try to run this my login screen appears fine but when I click the registration button I get an error "undefined is not an object (evaluating 'this.props.navigation')". As suggested in other threads I have removed the this.props into this code

navigation.navigate('Registration');

However when I click on the registration button I get an error "Can't find variable: navigation"

Another variation I have tried is changing my createStackNavigator function in my App.js file to this:

 const AppNavigator = createStackNavigator({
    screen: Login,
    screen: Registration
 });

Obviously with not initial route indicated the behavior is squirly and the app goes straight to the registration screen when starting the app but there are not errors. Is there something wrong with my createStackNavigator function or something else?

Answer 1

Instead of

{this.startRegistration}

do

{ () => this.startRegistration()}

another solution is to bind the function in the constructor

this.startRegistration.bind(this)

Answer 2

您需要将导航作为道具，例如：

<MyListComponent navigation={this.props.navigation} />