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

【问题标题】：How can I navigate from one screen to another via a button press using stack navigator?如何使用堆栈导航器通过按下按钮从一个屏幕导航到另一个屏幕？
【发布时间】：2019-10-01 18:27:23
【问题描述】：

当按下可触摸的不透明样式按钮时，我希望从我的登录屏幕导航到我的注册屏幕。我还想将初始屏幕设置为登录屏幕。但是，在尝试对其他人有用的解决方案时，我要么遇到错误，要么出现意外行为。下面是我的 LoginForm 类的一部分，这是按下按钮的位置。

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>

当注册按钮被按下时，它会调用 startRegistration 函数。这是我的 App.js 类：

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);

当我尝试运行它时，我的登录屏幕看起来很好，但是当我单击注册按钮时，我收到一个错误“未定义不是对象（评估'this.props.navigation'）”。正如其他线程中所建议的那样，我已将 this.props 删除到此代码中

navigation.navigate('Registration');

但是，当我单击注册按钮时，我收到一个错误“找不到变量：导航”

我尝试的另一个变体是将我的 App.js 文件中的 createStackNavigator 函数更改为：

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

显然没有初始路线表明行为是松散的，应用程序在启动应用程序时直接进入注册屏幕，但没有错误。我的 createStackNavigator 函数有什么问题吗？

【问题讨论】：

试试这个startRegistration = () => { this.props.navigation.navigate('Registration');}

标签： javascript android react-native user-interface react-navigation

【解决方案1】：

您需要将导航作为道具传递，如下所示：

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

【讨论】：

是的，谢谢你我开始认为这是错误的，但不知道如何通过它。但是，该代码块会去哪里？在 App.js 中还是在特定组件中？
您可以在任何组件中执行此操作，只要通过 React 的标准 Context Api 将导航提供程序传递给所有子组件。

【解决方案2】：

代替

{this.startRegistration}

做

{ () => this.startRegistration()}

另一种解决方法是在构造函数中绑定函数

this.startRegistration.bind(this)

【讨论】：