使用 React Native 导航时超出最大调用堆栈大小

Question

我刚刚开始使用 React Native，所以我还在学习中。
我正在尝试在我的应用程序中实现导航，除了一页之外几乎所有内容都工作正常。
在应用程序中，当用户注册时，他可以作为个人或组织注册，这将导致他根据他的选择进入不同的注册表格。
但是，当我选择任一选项时，应用程序都会崩溃，并且出现以下错误：

未捕获的错误：RangeError：超出最大调用堆栈大小，堆栈。

我在网上寻找答案，大多数时候是因为导航中有无限循环。但是，我在代码中没有看到任何可能存在循环的地方，我按照对其他页面所做的那样进行了操作，这再次运行良好。

这是App.js的代码

import React from 'react';
import { StyleSheet, Text, View, TouchableOpacity } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { LinearGradient } from 'expo-linear-gradient';

import WelcomeToKarma from "./components/WelcomeToKarma.js";
import Login from "./components/Login.js";
import ForgotPass from "./components/ForgotPass.js";
import UserRegistration from "./components/UserRegistration.js";
import OpenEmail from "./components/OpenEmail.js";


function InitialScreen({ navigation }) {
  return (

    <View style={styles.container}>
      <LinearGradient
        style={{ alignItems: 'center', justifyContent: 'center', flex: 1, width: '100%' }}
        colors={['#00c5c4', '#01a7a6']}
        start={{ x: 1, y: 0 }}
        end={{ x: 0, y: 0 }}>
        <Text style={styles.textHeader}>KARMA</Text>
        <Text style={styles.text}>Lorem ipsum dolo ecte </Text>
        <Text style={styles.text}>adipisicing elit sed do</Text>
        <TouchableOpacity
          style={styles.buttonContainer}
          onPress={() => navigation.navigate('Back')}
        >
          <Text style={{ color: "white", fontSize: 20, }}>Sign Up</Text>
        </TouchableOpacity>
        <Text
          style={styles.loginText}
          onPress={() => navigation.navigate('Loginate')}
        >
          Already have an account? Login
            </Text>
      </LinearGradient>
    </View>
  );
}

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={InitialScreen} options={{ headerShown: false }} />
        <Stack.Screen name="Back" component={WelcomeToKarma} options={{ headerShown: false }} />
        <Stack.Screen name="UserRegistration"
          component={UserRegistration}
          options={{
            headerTintColor: '#01b0b0',
            title: 'Sign up',
            headerTitleStyle: {
              textAlign: 'left',
              fontWeight: 'bold',
              fontSize: 22,
              color: 'black',
            }
          }} />
        <Stack.Screen name="Loginate" component={Login}
          options={{
            headerTintColor: '#01b0b0',
            title: 'Login',
            headerTitleStyle: {
              textAlign: 'left',
              color: 'black',
              fontSize: 22,
            }
          }} />
        <Stack.Screen name="ForgotPass" component={ForgotPass}
          options={{
            headerTintColor: '#01b0b0',
            title: 'Forgot Password',
            headerTitleStyle: {
              textAlign: 'left',
              color: 'black',
              fontSize: 22,
            }
          }} />
        <Stack.Screen name="OpenEmail" component={OpenEmail}
          options={{
            headerTintColor: '#01b0b0',
            title: "Forgot Password",
            headerTitleStyle: {
              textAlign: 'left',
              color: 'black',
              fontSize: 22,
            }
          }} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  textHeader: {
    color: 'white',
    fontSize: 80,
  },
  text: {
    color: 'white',
    fontSize: 20,
  },
  buttonContainer: {
    borderColor: 'white',
    borderWidth: 2,
    borderRadius: 30,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    height: 44,
    width: 200,
    marginBottom: 20,
    marginTop: 10,
    position: 'absolute',
    bottom: 60,
  },
  loginText: {
    color: "white",
    fontSize: 15,
    marginTop: 10,
    marginBottom: 20,
    bottom: 10,
    position: 'absolute',
    justifyContent: 'center',
    alignItems: 'center'
  },
});

以下是WelcomeToKarma.js的代码，用户可以在其中选择他是个人还是组织。

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView, SafeAreaView } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';
import Constants from 'expo-constants';

import heart from '../assets/heart.png';
import earth from '../assets/earth.png';
import Card from './Card.js';


export default class WelcomeToKarma extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <SafeAreaView style={{ flex: 1 }}>
        <View style={styles.container}>
          <View style={styles.welcomeText}>
            <Text style={styles.header}>Welcome to KARMA</Text>
            <Text style={styles.text}>Lorem ipsum dolo sit amet, consectetur adip isicing elit, sed do eiusmod</Text>
          </View>
          <ScrollView
            scrollEventThrottle={16}
            horizontal={true}
            showsHorizontalScrollIndicator={false}
            style={styles.scrollViewView}>
            <Card imageUri={heart} question="Are you an individual?" page="UserRegistration"></Card
{/* This is where the app crashes when I press the TouchableOpacity*/}
            <Card imageUri={earth} question="Are you an organization?" page=""></Card>
{/* And here as well, I know the page parameter is empty, that's because I still haven't done the page for it */}
          </ScrollView>
          <View style={styles.bottomView}>
            <Text style={styles.boldText}>Already on Karma?</Text>
            <View style={styles.buttonView}>
              <LinearGradient
                style={{ borderRadius: 22, alignItems: 'center', justifyContent: 'center', flexDirection: 'row' }}
                colors={['#00c5c4', '#01a7a6']}
                start={{ x: 1, y: 0 }}
                end={{ x: 0, y: 0 }}>
                <TouchableOpacity
                style={styles.loginButton}
                  onPress={() => navigate('Loginate')}
                >
                  <Text style={styles.login}>Login</Text>
                </TouchableOpacity>
              </LinearGradient>
            </View>
          </View>
        </View>
      </SafeAreaView>
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5F5F5',
    marginTop: Constants.statusBarHeight,
    alignItems: 'center',
    justifyContent: 'center',
  },
  welcomeText: {
    marginBottom: 10,
  },
  scrollViewView: {
    alignItems: 'center',
    pagingEnabled: 'true',
    showPageIndicator: 'true',
    marginBottom: 20,
  },
  bottomView: {
    backgroundColor: 'white',
    width: '100%',
    marginHorizontal: 20,
    paddingBottom: 30,
  },
  buttonView: {
    backgroundColor: 'white',
    alignItems: 'center',
    width: '100%'
  },
  header: {
    fontSize: 20,
    marginHorizontal: 20,
    marginVertical: 10,
    textAlign: 'left'
  },
  text: {
    fontSize: 15,
    marginHorizontal: 20,
    marginVertical: 10,
    textAlign: 'left'
  },
  boldText: {
    fontSize: 15,
    marginHorizontal: 20,
    marginVertical: 10,
    textAlign: 'left',
    fontWeight: 'bold'
  },
  loginButton: {
    borderRadius: 22,
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    height: 44,
    width: '85%',
    padding: 20,
    backgroundColor: 'white',
    margin: 2,
  },
  login: {
    color: '#01b0b0',
    textAlign: 'center',
    fontSize: 20,
  },
});

我基本上试图将ToucheableOpacity onPress作为参数传递给Card。当我按下这些按钮时，应用程序崩溃了。

这是Card.js的代码。

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, Image } from 'react-native';
import { LinearGradient } from 'expo-linear-gradient';

class Card extends Component {
    constructor(props) {
        super(props);
        this.navigate.bind(this);
    }

    navigate(txt) {
        this.navigate(txt);
    }

    render() {
        return (
            <View style={styles.container}>
                <View style={{ justifyContent: 'space-between', alignItems: 'center', flex: 1 }}>
                    <Image source={this.props.imageUri} style={{ width: '50%', height: '50%', resizeMode: 'cover' }}></Image>
                </View>
                <View style={{ justifyContent: 'center', flex: 1 }}>
                    <Text style={{ marginVertical: 5, fontWeight: 'bold' }}>{this.props.question}</Text>
                    <Text style={{ marginVertical: 5 }}>Lorem ipsum dolor sit amet, consectetur adip isicing elit,
                   sed do eiusm ut labore et dolore magna aliqua
                    </Text>
                    <View>
                        <LinearGradient
                            style={styles.signupButtonView}
                            colors={['#00c5c4', '#01a7a6']}
                            start={{ x: 1, y: 0 }}
                            end={{ x: 0, y: 0 }}
                        >
                            <TouchableOpacity
                                onPress={() => this.navigate(this.props.page)}>
                                <Text style={styles.signup} >Sign up</Text>
                            </TouchableOpacity>
                        </LinearGradient>
                    </View>
                </View>
            </View>
        )
    }
}

export default Card;

const styles = StyleSheet.create({
    container: {
        height: '95%',
        width: 250,
        borderRadius: 20,
        borderBottomWidth: 10,
        borderBottomColor: '#01b0b0',
        marginHorizontal: 10,
        marginVertical: 10,
        shadowColor: 'black',
        shadowOffset: { width: 0, height: 3 },
        shadowRadius: 6,
        shadowOpacity: 0.26,
        elevation: 8,
        padding: 20,
        backgroundColor: 'white'
    },
    signupButtonView: {
        borderRadius: 22,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        padding: 20,
        height: 44,
        width: 200,
    },
    signupButton: {
        borderRadius: 22,
        alignItems: 'center',
        justifyContent: 'center',
        flexDirection: 'row',
        padding: 20,
        height: 44,
        width: 200,
    },
    signup: {
        color: 'white',
        fontSize: 20,
    },
    sty: {
        borderRadius: 30,
    }
});

导航与其他所有页面都完美配合，所以我不明白为什么它不能与此页面配合使用。难道是因为我没有正确传递ToucheableOpacity onPress方法？我尝试了不同的方法来传递 onPress 作为参数，但看起来这种方法是最好的方法（如果不是唯一的方法？）
我也在采取任何提示和建议来改进我的编码，正如我所说：我刚刚开始学习React Native。

Answer 1

这看起来非常递归：

  navigate(txt) {
        this.navigate(txt);
   }

您已绑定导航到班级。您位于导航函数内，其中的行正在调用自身。您将获得 stackover.com

您需要像在“WelcomeToKarma”中那样在“Card”中拾取导航道具，并使用它进行导航。

 const { navigate } = this.props.navigation;

所以导航可以变成

  navigate(txt) {
        this.props.navigate(txt);
    }

问题解决了！