我刚刚开始使用React Native,所以我还在学习。我正在尝试对我的应用程序实施导航,除一页外,几乎所有功能都可以正常运行。在应用程序中,当用户注册时,他可以以个人或组织身份注册,这将导致他根据自己的选择使用不同的注册表单。但是,当我选择其中一个选项时,应用程序崩溃,并且出现以下错误:
Uncaught Error: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
作为参数传递给Card。当我按下这些按钮时,应用程序崩溃。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.js
的代码。方法吗?我尝试了不同的方式将onPress作为参数传递,但看起来这种方式是最好的方式(如果不是唯一的话?)正如我所说的,我也正在采取任何技巧和建议来改进我的编码:我才刚刚开始学习React Native。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
我刚刚开始使用React Native,所以我还在学习。我正在尝试对我的应用程序实施导航,除一页外,几乎所有功能都可以正常运行。在应用程序中,当用户注册时,...
这看起来非常递归: