Я только начал использовать React Native, поэтому я все еще учусь.
Я пытаюсь внедрить Навигацию в свое приложение, и почти все работает нормально, за исключением одной страницы.
В приложении, когда Пользователь регистрируется, он может зарегистрироваться как частное лицо или как организация, что приведет его к различным формам регистрации в зависимости от его выбора.
Однако, когда я выбираю любой вариант, приложение вылетает, и я получаю следующую ошибку :
Uncaught Error: RangeError: Превышен максимальный размер стека вызовов, стек.
Я искал ответы в Интернете и большую часть времени это потому, что существует бесконечное число oop в навигации. Тем не менее, я не вижу нигде в коде, где может быть все oop, и я сделал это, как я сделал для других страниц, что, опять же, отлично работает.
Вот код для приложения. 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 . Приложение вылетает при нажатии этих кнопок.
А вот код для карты. 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.