解决方案

Question

我有一个启动屏幕，几秒钟后会转到“简介”页面，从“简介”页面，我有一个登录和注册链接。我试图设置从“简介”页面到“登录” /从“登录”的导航，但是遇到一条错误消息： 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中选择登录名或注册名，以便能够单击注册进行注册，而从注册名中能够单击登录。

Answer 1

解决方案

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)}
...

在屏幕之间创建导航时遇到问题

1 个答案:

解决方案

为什么