Возникла проблема с созданием навигации между экранами - PullRequest
Новая
       17

Возникла проблема с созданием навигации между экранами

0 голосов
/ 31 января 2019

У меня есть заставка, которая через несколько секунд переходит на страницу «Введение», а со страницы «Введение» у меня есть ссылка для входа и регистрации.Я попытался настроить навигацию со страницы «Введение» к / от входа в систему, но столкнулся с ошибкой, которая говорит: undefined не является объектом (оценка «_this.props.navigation.navigate»).

Я пытался проверить документацию по реактивной навигации, но не получил четкого объяснения, поскольку они запутали все экраны в App.js.

App.js 

import React, {Component} from 'react';
import { StyleSheet, StatusBar, Text, View} from 'react-native';
import { createStackNavigator, createAppContainer } from 'react-navigation';
import Intro from './screen/Intro';
import Login from './components/Login';


const RootStack = createStackNavigator(
  {
    IntroScreen: Intro,
    LoginScreen: Login,
  },
  {
    initialRouteName: 'IntroScreen',
  }
);

const AppNavigator = createAppContainer(RootStack);
export default class App extends Component {

  render() {
    return (
      <View style={styles.container}>
        <StatusBar
         barStyle="light-content"
         backgroundColor="#fefefe"
        />
      <Intro/>

      </View>
    );
  }
}

Intro.js Страница следует за заставкой, и на странице я могу выбрать логин или зарегистрироваться.

import React, { Component } from 'react';
import {
Text, 
Image,
View, 
ImageBackground,
StyleSheet,
TouchableOpacity
  } 
from 'react-native';

import SplashScreen from 'react-native-splash-screen';
export default class Intro extends Component{
    componentDidMount(){
        SplashScreen.hide();
      }
    render(){
        return(
            <ImageBackground  source={require('../images/signup-background.jpg')} style={{width: '100%', height: '100%'}}>
                <View style={styles.container}>
                 <Image 
                  source ={ require('../images/logo.png')}
                 />
                 <Text style={styles.simpleText}>WELCOME</Text>
                 <Text style={styles.literal}>Thank you for your interest in the APG app. </Text>
                 <Text style={styles.literal}>How can we help you?</Text>
                 <TouchableOpacity
                  style= {styles.signinCont}
                  onPress={() => this.props.navigation.navigate('IntroScreen')} 
                  >
                    <Text style= {styles.signinText}>
                        I am already an APG Patient
                    </Text>
                 </TouchableOpacity>
                 <TouchableOpacity style= {styles.signupCont}>
                    <Text style= {styles.signupText}>
                        I am not an APG Patient 
                    </Text>
                 </TouchableOpacity>
             </View>
            </ImageBackground>
        );

    }
}

Login.js. При входе в систему у меня есть кнопка для ссылки на «Регистрация» и «забыл пароль», если у пользователя нет учетной записи 

import React, { Component } from 'react';
import { 
 Text, 
 TouchableOpacity,
 Label,
 View,
 TextInput,
 StyleSheet,

 } 
 from 'react-native';


 export default class Login extends Component {
     render(){
         return(
            <View style={styles.container}>
                <View>
                    <Text>Login</Text>
                </View>
                <Label>Email</Label>
                <TextInput 
                  style={Styles.textbox}  
                  placeholder="Email"
                  value= {this.state.email}

                />
                <Label>Password</Label>
                <TextInput 
                  style={Styles.textbox}  
                  placeholder="Password"
                  value ={this.state.password}
                  secureTextEntry={true}
                />
                <View>
                    <Text>Forgot password</Text>
                </View>
                <TouchableOpacity style={styles.signin}>
                    <Text style ={styles.signinText}>Sign In</Text>
                </TouchableOpacity>
                <View>
                    <Text>Not an APG Member? </Text>
                <TouchableOpacity style={styles.signup}
                 onPress ={() => this.props.navigation.navigate('SignUp') }
                 >
                    <Text>Sign Up</Text>
                </TouchableOpacity>
                </View>
            </View>
         );
     }
 }

Я хочу бытьвозможность выбрать либо логин, либо регистрацию, в зависимости от обстоятельств, из Intro.js и login.js, чтобы иметь возможность щелкнуть по регистрации для регистрации и из регистрации, чтобы иметь возможность щелкнуть по имени входа.

1 Ответ

0 голосов
/ 31 января 2019

Решение

onPress={this.props.navigation.navigate('SignUp')} не вызывать функцию this.props.navigation.navigate.

Измените свойство onPress, как показано ниже.

Используйте функцию стрелки es6 для создания анонимной функции. 

<TouchableOpacity 
    style={styles.signup}
    onPress={() => this.props.navigation.navigate('SignUp')}
>

или вы можете ссылаться на свою функцию в onPress.Это делает производительность лучше, когда рендеринг снова.

navigate = () => {
    this.props.navigation.navigate('SignUp')
}

return (
...
<TouchableOpacity 
    style={styles.signup}
    onPress={this.navigate}
>
)

Почему

props ссылается только на значение, даже если оно является функцией.Поэтому сделайте props ссылкой на анонимную функцию или функцию в предопределенном вами классе.

И не забывайте bind(this) при использовании функции не стрелки.

navigate() {
    this.props.navigation.navigate('SignUp')
}

...
onPress={this.navigate.bind(this)}
...
...