Question

当我按下可触摸的不透明样式按钮时，我希望从登录屏幕导航到注册屏幕。我还想将初始屏幕设置为登录屏幕。但是，在尝试对他人有用的解决方案时，我会得到错误或意外的行为。下面是我的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函数是否存在问题或其他原因？

Answer 1

代替

{this.startRegistration}

做

{（）=> this.startRegistration（）}

另一种解决方案是将函数绑定到构造函数中

this.startRegistration.bind（this）

Answer 2

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

<div id="ElementIDhere123">Timer Placeholder</div>

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

2 个答案: