Реагировать на ошибку навигации this.props.navigation.navigat
У меня есть два экрана, и я хочу, чтобы при щелчке мышью перемещался новый экран, используя реагирующую навигацию. но я получил ошибку
this.props.navigation.navigate
вот мой код. кто знает в чем проблема. Я следую каждому шагу.
import React, {Component} from 'react';
import { AppRegistry, View, Text,StyleSheet, TextInput, Image, ScrollView, Button, TouchableOpacity} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import SignUp from './SignUp';
class Login extends React.Component{
constructor(props){
super(props);
this.state = { text: 'Useless Placeholder' };
}
render(){
const {navigate} = this.props.navigation;
return(
<View>
<ScrollView showsVerticalScrollIndicator = {false}>
<View style = {styles.button}>
<TouchableOpacity>
<Text style = {styles.buttonText}>SIGN IN</Text>
</TouchableOpacity>
</View>
<View style = {styles.createAccount}>
<Text style = {styles.createText}
onPress = {() => this.props.navigation.navigate("Home")}
>Create new account</Text>
</View>
</View>
</ScrollView>
</View>
);
}
}
module.exports = Login;
const MainNavigator = createStackNavigator({
Home: {screen: SignUp}
});
export default createAppContainer(MainNavigator);
Ответы 2
Экран входа в систему не является частью вашего стека.
const MainNavigator = createStackNavigator({
Home: {screen: SignUp}
});
Просто сделайте экран отдельный компонент входа, добавьте его в верхнюю часть стека, после чего вы сможете перемещаться.
так
const MainNavigator = createStackNavigator({
Login:{screen:Login}
Home: {screen: SignUp}
});
Логин.js
import React, {Component} from 'react';
import { AppRegistry, View, Text,StyleSheet, TextInput, Image, ScrollView, Button, TouchableOpacity} from 'react-native';
export default class Login extends React.Component{
constructor(props){
super(props);
this.state = { text: 'Useless Placeholder' };
}
render(){
const {navigate} = this.props.navigation;
return(
<View>
<ScrollView showsVerticalScrollIndicator = {false}>
<View style = {styles.button}>
<TouchableOpacity>
<Text style = {styles.buttonText}>SIGN IN</Text>
</TouchableOpacity>
</View>
<View style = {styles.createAccount}>
<Text style = {styles.createText}
onPress = {() => this.props.navigation.navigate("Home")}
>Create new account</Text>
</View>
</View>
</ScrollView>
</View>
);
}
MainNavigator.js
import React, {Component} from 'react';
import { AppRegistry, View, Text,StyleSheet, TextInput, Image, ScrollView, Button, TouchableOpacity} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import SignUp from './SignUp';
import Login from './Login'
const MainNavigator = createStackNavigator({
Login: {screen:Login},
Home: {screen: SignUp}
});
export default createAppContainer(MainNavigator);
просто дайте логин:{экран:Логин}
я нахожусь в компоненте входа. тогда как это сделать?
@zeeshan Вы пытаетесь перейти от входа в систему к регистрации в соответствии с вашим кодом, верно?
@ParasKorat да
@zeeshan просто попробуйте, как я уже упоминал в своем ответе, и ваш корневой файл - MainNavigator.js.
@ParasKorat теперь у меня ошибка. проверьте метод рендеринга APP
@zeeshan, ты можешь перейти на следующий экран? и еще одно, это также меняет ваш метод onPress, если вы используете const {navigate} = this.props.navigation, затем измените его на <Text style = {styles.createText} onPress = {() =>navigate("Home")} >Create new account</Text>
@ParasKorat мой корневой файл - APP.js, и я использую заставку при загрузке, а затем перенаправляю на экран входа в систему.
@ParasKorat не может ориентироваться. я вношу твои изменения
@zeeshan, не могли бы вы добавить свою файловую структуру с кодом, чтобы я помог вам лучше
src -> Главная -> Login.js, SignUp.js, MainNavigator.js и App.js в основном файле\
Давайте продолжить обсуждение в чате.
вы не добавили свой экран входа в стек вот так
const MainNavigator = createStackNavigator({
Login : {screen: Login},
Home: {screen: SignUp}
});
какой тип ошибок просто
this.props.navigation.navigate? Можете ли вы предоставить полное сообщение?