堆栈导航器给我未定义的错误 [英] Stack navigator giving me undefined error

问题描述

我正在使用

这是 Login.js ：

 从'react'导入React，{Component};来自'react-redux'的
 import {connect}; 
从'react-native'导入{ScrollView，Text，TextInput，View，Button，StyleSheet};来自'../redux/actions/auth'的
 import {login}; 
从'../lib/aws-cognito-identity'导入{AuthenticationDetails，CognitoUser，CognitoUserAttribute，CognitoUserPool}; 
从'react-navigation'导入StackNavigator; 
从'./AboutDendro'导入AboutDendro; 
 
 const awsCognitoSettings = {
 UserPoolId：'something'，
 ClientId：'something'
}; 
 
 class登录扩展组件{
构造函数（道具）{
 super（props）; 
 this.state = {
页面：'登录'，
用户名：''，
密码：''
}; 
} 
 
 get alt（）{return（this.state.page ==='登录'）？ '注册登录'; } 
 
 handleClick（e）{
 e.preventDefault（）; 
 const userPool = new CognitoUserPool（awsCognitoSettings）; 
 
 //注册
 if（this.state.page ==='SignUp'）{
 const attributeList = [
 new CognitoUserAttribute（{Name：'电子邮件'，价值：this.state.username}）
]; 
 userPool.signUp（
 this.state.username，
 this.state.password，
 attributeList，
 null，
（错误，结果）= > {
 if（err）{
 alert（err）; 
 this.setState（{username：''，password：''}）; 
 return; 
} 
 console.log（`result = $ {JSON.stringify（result）}`）; 
 this.props.onLogin（this.state.username，this.state.password）; 
} 
）; 
} else {
 const authDetails = new AuthenticationDetails（{
用户名：this.state.username，
密码：this.state.password 
}）; 
 const cognitoUser = new CognitoUser（{
用户名：this.state.username，
池：userPool 
}）; 
 cognitoUser.authenticateUser（authDetails，{
 onSuccess :( result）=> {
 console.log（`access token = $ {result.getAccessToken（）。getJwtToken（）}`） ; 
 this.props.onLogin（this.state.username，this.state.password）; 
}，
 onFailure：（err）=> {
 alert（err） ）; 
 this.setState（{username：''，密码：''}）; 
返回; 
} 
}）; 
} 
} 
 
 togglePage（e）{
 this.setState（{page：this.alt}）; 
 e.preventDefault（）; 
} 
 
 static navigationOptions = {
 title：'AboutDendro'，
}; 
 
 render（）{
 const {navigate} = this.props.navigation; 
 const App = StackNavigator（{
主页：{screen：Login}，
 Profile：{screen：AboutDendro}，
}）; 
 
 return（
< ScrollView style = {{padding：20}}> 
< Button 
 title =转到Jane的个人资料
 onPress = {（）=> 
导航（'AboutDendro'，{name：'AboutDendro'}）
} 
 /> 
< Text style = {{ fontSize：27}}> {this.state.page}< / Text> 
< TextInput 
 placeholder ='电子邮件地址'
 autoCapitalize ='none'
 autoCorrect = {false} 
 autoFocus = {true} 
 keyboardType ='email-address'
 value = {this.state.username} 
 onChangeText = {（text）=> this.setState（{username：text}）} /> 
< TextInput 
 placeholder ='Password'
 autoCapita lize ='none'
 autoCorrect = {false} 
 secureTextEntry = {true} 
 value = {this.state.password} 
 onChangeText = {（text）=> this.setState（{password：text}）} /> 
<查看样式= {{margin：7}} /> 
< Button onPress = {（e）=> this.handleClick（e）} title = {this.state.page} /> 
< View style = {styles.firstView}> 
< Text onPress = {（e）=> this.togglePage（e）} style = {styles.buttons}> 
 {this.alt} 
< / Text> 
< /查看> 
< / ScrollView> 
）; 
} 
} 
 
 const styles = StyleSheet.create（{
 buttons：{
 fontSize：12，
 color：'blue' ，
 flex：1 
}，
 
 firstView：{
 margin：7，
 flexDirection：'row'，
 justifyContent：'中心'
} 
}）; 
 
 const mapStateToProps =（state，ownProps）=> {
 return {
 isLoggedIn：state.auth.isLoggedIn 
}; 
} 
 
 const mapDispatchToProps =（dispatch）=> {
返回{
 onLogin :(用户名，密码）=> {dispatch（登录（用户名，密码））; } 
} 
} 
 
导出默认连接（mapStateToProps，mapDispatchToProps）（登录）; 
  

解决方案

这是因为导航不在您的道具中。它是您创建的 App 组件的一部分。但是你对这个组件什么都不做。

您应该有一个 App.js 文件，使用您的stackNavigator，将您的Login组件设置为您的默认组件你的stackNavigator的参数。

看看这个文件

I'm using https://facebook.github.io/react-native/docs/navigation.html by the way.

I'm trying to use the StackNavigator to go from Login.js to AboutDendro.js. What's wrong in my <Button/> component that's throwing that error in my iOS simulator?

Here's Login.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, Text, TextInput, View, Button, StyleSheet } from 'react-native';
import { login } from '../redux/actions/auth';
import {AuthenticationDetails, CognitoUser, CognitoUserAttribute, CognitoUserPool} from '../lib/aws-cognito-identity';
import StackNavigator from 'react-navigation';
import AboutDendro from './AboutDendro';

const awsCognitoSettings = {
    UserPoolId: 'something',
    ClientId: 'something'
};

class Login extends Component {
    constructor (props) {
        super(props);
        this.state = {
            page: 'Login',
            username: '',
            password: ''
        };
    }

    get alt () { return (this.state.page === 'Login') ? 'SignUp' : 'Login'; }

    handleClick (e) {
        e.preventDefault();
        const userPool = new CognitoUserPool(awsCognitoSettings);

        // Sign up
        if (this.state.page === 'SignUp') {
            const attributeList = [
                new CognitoUserAttribute({ Name: 'email', Value: this.state.username })
            ];
            userPool.signUp(
                this.state.username,
                this.state.password,
                attributeList,
                null,
                (err, result) => {
                    if (err) {
                        alert(err);
                        this.setState({ username: '', password: '' });
                        return;
                    }
                    console.log(`result = ${JSON.stringify(result)}`);
                    this.props.onLogin(this.state.username, this.state.password);
                }
            );
        } else {
            const authDetails = new AuthenticationDetails({
                Username: this.state.username,
                Password: this.state.password
            });
            const cognitoUser = new CognitoUser({
                Username: this.state.username,
                Pool: userPool
            });
            cognitoUser.authenticateUser(authDetails, {
                onSuccess: (result) => {
                    console.log(`access token = ${result.getAccessToken().getJwtToken()}`);
                    this.props.onLogin(this.state.username, this.state.password);
                },
                onFailure: (err) => {
                    alert(err);
                    this.setState({ username: '', password: '' });
                    return;
                }
            });
        }
    }

    togglePage (e) {
        this.setState({ page: this.alt });
        e.preventDefault();
    }

    static navigationOptions = {
        title: 'AboutDendro',
    };

    render() {
        const { navigate } = this.props.navigation;
        const App = StackNavigator({
            Home: { screen: Login },
            Profile: { screen: AboutDendro },
        });

        return (
            <ScrollView style={{padding: 20}}>
                <Button
                    title="Go to Jane's profile"
                    onPress={() =>
                        navigate('AboutDendro', { name: 'AboutDendro' })
                    }
                />
                <Text style={{fontSize: 27}}>{this.state.page}</Text>
                <TextInput
                    placeholder='Email Address'
                    autoCapitalize='none'
                    autoCorrect={false}
                    autoFocus={true}
                    keyboardType='email-address'
                    value={this.state.username}
                    onChangeText={(text) => this.setState({ username: text })} />
                <TextInput
                    placeholder='Password'
                    autoCapitalize='none'
                    autoCorrect={false}
                    secureTextEntry={true}
                    value={this.state.password}
                    onChangeText={(text) => this.setState({ password: text })} />
                <View style={{margin: 7}}/>
                <Button onPress={(e) => this.handleClick(e)} title={this.state.page}/>
                <View style={styles.firstView}>
                    <Text onPress={(e) => this.togglePage(e)} style={styles.buttons}>
                        {this.alt}
                    </Text>
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    buttons: {
        fontSize: 12,
        color: 'blue',
        flex: 1
    },

    firstView: {
        margin: 7,
        flexDirection: 'row',
        justifyContent: 'center'
    }
});

const mapStateToProps = (state, ownProps) => {
    return {
        isLoggedIn: state.auth.isLoggedIn
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        onLogin: (username, password) => { dispatch(login(username, password)); }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(Login);

解决方案

It is because navigation is not in your props. It is a part of your App component you created. But you do nothing with this component.

You should have an App.js file, with your stackNavigator, set your Login component as your default component in your stackNavigator's parameters.

Take a look at this documentation

这篇关于堆栈导航器给我未定义的错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！