使用 StackNavigator 反应导航问题

Question

我已经被这个问题困住了两天。我不知道如何解决这个问题。我知道错误是我不能在那里使用this.porps，但我不知道如何解决。我在任何地方都找不到解决方案。

这是我的导航器配置：

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

import LoginScreen from './screens/auth/Login';
import CadastroScreen from './screens/auth/Cadastro';

class Login extends React.Component {
  render() {
    return (
      <LoginScreen />
    );
  }  
}

class Cadastro extends React.Component {
  render() 
    {
    return (
      <CadastroScreen />
    );
  }  
}

const AppNavigator = {
    Cadastro: {
      screen: Cadastro,
      navigationOptions: { header: null }
    },
    Login: {
      screen: Login,
      navigationOptions: { header: null }
    },
  };

const Config = {
    initialRouteName: 'Login'
}

const AppNavigation = createStackNavigator(AppNavigator, Config);
export default createAppContainer(AppNavigation);

这就是我尝试更改屏幕的方式：

import React from 'react';
import {Text, View, Button, Alert, TextInput, Image, TouchableOpacity} from 'react-native';
import { StackActions, NavigationActions } from 'react-navigation';
import Patern from '../style/Style';
class LoginScreen extends React.Component {

    render() {      
        return (
            <View style={Patern.container}>                
                <TouchableOpacity onPress={() => 
                       this.props.navigation.dispatch(
                        StackActions.reset({
                          routeName: 'Cadastro',
                          index: 0,
                          actions: 
                          NavigationActions.navigate({ routeName: 'Cadastro' })
                 }))}>
                </TouchableOpacity>                
         </View>
        );
    }
}

export default LoginScreen;

Answer 1

class Login extends React.Component {
  render() {
    return (
      <LoginScreen navigatoin={this.props.navigation} />
    );
  }  
}

您需要将道具从Login 传递给LoginScreen。 Navigation prop 仅从Navigator 传递到一个深度。