Question

我正在尝试从本机反应开始，我正在制作登录屏幕并进行注册，但是我收到警告：

警告：道具类型失败：道具navigation被标记为必需在Login中，但其值为undefined。

我的登录组件：

import React, { Component } from 'react';
import PropTypes from 'prop-types';

import { StatusBar, AsyncStorage } from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';

import api from '../../services/api';

import {
    Container,
    Logo,
    Input,
    ErrorMessage,
    Button,
    ButtonText,
    SignUpLink,
    SignUpLinkText,
} from './styles';

export default class Login extends Component {

    static navigationOptions = {
        header: null,
    };

    static propTypes = {
        navigation: PropTypes.shape({
          navigate: PropTypes.func,
          dispatch: PropTypes.func,
        }).isRequired,
    };

    state = { email: '', password: '', error: '', navigation: {navigate: '', dispatch: ''} };


    handleEmailChange = (email) => {
        this.setState({ email });
    };

    handlePasswordChange = (password) => {
        this.setState({ password })
    };

    handleCreateAccountPress = () => {
        this.props.navigation.navigate('Registrar');
    };

    handleSignInPress = async () => {
        if(this.state.email.length === 0 || this.state.password.length === 0){
            this.setState({error: 'Necessário preencher email e senha para entrar!'}, () => false);
        } else {
            try {
                const response = await api.post('/sessions', {
                    email: this.state.email,
                    password: this.state.password
                });

                await AsyncStorage.setItem('@FabricaDeMonstroApp:token', response.data.token);

                const resetAction = StackActions.reset({
                    index: 0,
                    actions: [
                        NavigationActions.navigate({routeName: 'Main'}),
                    ],
                });

                this.props.navigation.dispatch(resetAction);

            } catch (_err){
                this.setState({error: 'Houve um problema ao entrar. Verifique suas credenciais'});
            }
        }
    };


    render(){
        return(
            <Container>
                <StatusBar hidden />

                <Logo source={require('../../images/logo.png')} resizeMode="contain" />
                <Input
                    placeholder="Endereço de e-mail"
                    value={this.state.email}
                    onChangeText={this.handleEmailChange}
                    autoCapitalize="none"
                    autoCorrect={false}    
                />
                <Input
                    placeholder="Senha"
                    value={this.state.password}
                    onChangeText={this.handlePasswordChange}
                    autoCapitalize="none"
                    autoCorrect={false}
                    secureTextEntry    
                />

                {this.state.error.length !== 0 && <ErrorMessage>{this.state.error}</ErrorMessage>}
                <Button onPress={this.handleSignInPress}>
                    <ButtonText>Entrar</ButtonText>
                </Button>

                <SignUpLink onPress={this.handleCreateAccountPress}>
                    <SignUpLinkText>Criar conta grátis</SignUpLinkText>
                </SignUpLink>

            </Container>
        );
    }
}

在我的routes.js中，我编写了这个stackNavigation：

import { createStackNavigator, createAppContainer } from 'react-navigation'

import Login from './pages/login'
import Registrar from './pages/registrar'
import Main from './pages/main'

const Routes = createStackNavigator({
    Login,
    Registrar,
    Main,
});

export default createAppContainer(Routes);

Answer 1

尽管您的组件已在StackNavigator中注册，但是您需要将其向下传递至导航道具以使其正常工作。

为此，您可以在登录组件中添加HOC withNavigation：

import { StackActions, NavigationActions, withNavigation } from 'react-navigation';

class Login extends React.Component {
// ...
}

export default withNavigation(Login);

Answer 2

如果要从login page进入市电，则可以调用页面导航命令。导航到main page时，main page在login page上方被激活。

Login.js

this.props.navigation.navigate('Main');

要将状态重置为活动屏幕为“登录屏幕”但将其堆叠在主屏幕顶部的位置，请执行以下操作：

import { StackActions, NavigationActions } from 'react-navigation';

const resetAction = StackActions.reset({
  index: 1,
  actions: [
    NavigationActions.navigate({ routeName: 'Main' }),
    NavigationActions.navigate({ routeName: 'Login' }),
  ],
});
this.props.navigation.dispatch(resetAction);

警告：道具类型失败：道具“导航”标记为必填项

2 个答案: