为啥我的堆栈导航器不显示？ [复制]

Posted 2023-03-15

【中文标题】为啥我的堆栈导航器不显示？ [复制]

【英文标题】：Why won't my stack navigator show up? [duplicate]为什么我的堆栈导航器不显示？ [复制]

【发布时间】：2017-07-26 19:09:40

【问题描述】：

我正在尝试在我的程序中使用StackNavigator。在Login.js 文件中，我尝试使用<Button/> 来实现这一点，但它不起作用。我收到以下错误。为什么会这样？顺便说一句，我正在关注https://facebook.github.io/react-native/docs/navigation.html。

这里是index.ios.js：

import React,  Component  from 'react';
import  AppRegistry, View from 'react-native';
import  Provider  from 'react-redux';
import Application from './pages/Application';
import store from './redux';
import api from './utilities/api';
import StackNavigator from 'react-navigation';
import Login from './pages/Login';
import About from './pages/About';

const App = StackNavigator(
    Home:  screen: Login ,
    Profile:  screen: About ,
);

export default class DApp extends Component 
    constructor(props) 
        super(props);
        this.state = 
            data: [],
            isLoading: true
        
        console.log("something");
    

    componentWillMount() 
        api.getData().then((res) => 
            this.setState(
                data: res.data
            )
        );
    

    render() 
        if(this.state.isLoading) 
            console.log("The data is: " + this.state.data);
         else 
            console.log("Else got executed");
        

        return (
            <View>
                <Provider store=store>
                    <Application/>
                </Provider>
                <App/>
            </View>
        );
    


AppRegistry.registerComponent('DApp', () => DApp);

这里是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 About from './About';

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';
    // 

    get alt() 
        if(this.state.page == 'Login') 
            return 'SignUp';
         else 
            return '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();
    

    render() 
        const  navigate  = this.props.navigation;
        return(
            <ScrollView style=padding: 20>
                <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>
                    <Button
                        title="Go to about"
                        onPress=() =>
                            navigate('About',  name: 'About' )
                        
                    />
                </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);

【问题讨论】：

props.navigation 是什么，你是如何通过它的？

你忘了设置initialRouteName

请不要破坏您的帖子。

【参考方案1】：

您没有正确导入 StackNavigator。 import StackNavigator from ‘react-navigation’;

【讨论】：

谢谢我这样做了。但是现在我在我的模拟器中收到一个不同的错误，上面写着undefined is not an object (evaluating 'this.props.navigation.navigate)。

请发布有关错误的详细信息，例如发生在哪里。

在Login.js 中，const navigate = this.props.navigation; 是未定义的。

看起来您没有正确设置带有 react-navigation 的登录组件。你能用你拥有的最新代码更新 sn-ps 吗？

您是否也在应用程序组件中呈现登录组件？导航器会为你渲染组件，并用导航道具包装它们来控制导航。