this.props.navigation.navigate не определено при использовании redux

Question

В настоящее время я изучаю реакцию на родной язык и реализую проект с использованием редукционной и реагирующей навигации. Всякий раз, когда я пытаюсь сделать this.props.navigation.navigate, я получаю, что undefined не является объектом. После регистрации this.props кажется, что на SEarchScreen вообще нет параметра навигации. Я использую:

реагирующий-нативный: https://github.com/expo/react-native/archive/sdk-37.0.0.tar.gz

реагирующий-навигация: 2.0.0-бета.5

реагирующий-избыточный: 7.2 .0

redux: 4.0.5

Вот мой код:

Приложение. js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import IonIcons from 'react-native-vector-icons/FontAwesome'
import {createStackNavigator, createBottomTabNavigator} from 'react-navigation'
import {Provider} from 'react-redux'
import { PersistGate } from 'redux-persist/lib/integration/react'
import {store, persistor} from './redux/store'

import SearchScreen from './screens/SearchScreen'
import ResultsScreen from './screens/ResultsScreen'

const SearchNavigator = createStackNavigator({
    SearchScreen: () => <SearchScreen/>,
    ResultsScreen: () => <ResultsScreen/>,
  }, 
  {
    initialRouteName: 'SearchScreen',
  }
)

const AppNavigator = createBottomTabNavigator({
  Search: {
    screen: SearchNavigator,
    navigationOptions: {
      tabBarLabel: 'Search',
      tabBarIcon: ({tintcolor}) => (
        <IonIcons name='search' size={25} color={tintcolor}/>
      ),
    }
  },
})

export default class App extends React.Component {
  render() {
    return(
      <Provider store={store}>
        <PersistGate persistor={persistor} loading={null}>
          <AppNavigator />
        </PersistGate>
      </Provider>
    )
  }

SearchScreen. js:

import React from 'react'
import { TextInput, KeyboardAvoidingView, StyleSheet, TouchableOpacity, View, Text } from 'react-native'
import { Dropdown } from 'react-native-material-dropdown'
import {connect} from 'react-redux'

import {getRecipes} from '../redux/actions'

class SearchScreen extends React.Component {
    state = {
        meal: '',
        ingredient: '',
        category: '',
        area: '',
    }

    categories = [{"value": "none"},{"value":"Beef"},{"value":"Breakfast"},{"value":"Chicken"},{"value":"Dessert"},{"value":"Goat"},{"value":"Lamb"},{"value":"Miscellaneous"},{"value":"Pasta"},{"value":"Pork"},{"value":"Seafood"},{"value":"Side"},{"value":"Starter"},{"value":"Vegan"},{"value":"Vegetarian"}]
    areas = [{"value": "none"},{"value":"American"},{"value":"British"},{"value":"Canadian"},{"value":"Chinese"},{"value":"Dutch"},{"value":"Egyptian"},{"value":"French"},{"value":"Greek"},{"value":"Indian"},{"value":"Irish"},{"value":"Italian"},{"value":"Jamaican"},{"value":"Japanese"},{"value":"Kenyan"},{"value":"Malaysian"},{"value":"Mexican"},{"value":"Moroccan"},{"value":"Russian"},{"value":"Spanish"},{"value":"Thai"},{"value":"Tunisian"},{"value":"Turkish"},{"value":"Vietnamese"}]

    handleMealChange = meal => {
        this.setState({meal})
    }
    handleIngredientChange = ingredient => {
        this.setState({ingredient})
    }
    handleDropdownChange = key => val => {
        this.setState({[key]: val})
    }

    handleSubmit = async () => {
        this.props.getRecipes(this.state)
        console.log(this.props)
        this.props.navigation.navigate('ResultsScreen')
    }

    handleAreaChange = this.handleDropdownChange('area')
    handleCategoryChange = this.handleDropdownChange('category')

    render() {
        return(
            <KeyboardAvoidingView style={{flex: 1, backgroundColor: 'pink'}} behavior='height'>
                <Text>Here is where you choose what to search for. You may only choose one at a time. To unselect an element in a list, just choose the none value.</Text>
                <TextInput 
                style={styles.input}
                value={this.state.meal}
                onChangeText={this.handleMealChange}
                placeholder='Meal name'
                editable={this.state.ingredient === '' && (this.state.area === '' || this.state.area === 'none') && (this.state.category === '' || this.state.category === 'none')}
                placeholderTextColor='#FFFFFF'
                />
                <TextInput 
                style={styles.input}
                value={this.state.ingredient}
                onChangeText={this.handleIngredientChange}
                placeholder='Main ingredient name'
                editable={this.state.meal === '' && (this.state.area === '' || this.state.area === 'none') && (this.state.category === '' || this.state.category === 'none')}
                placeholderTextColor='#FFFFFF'
                />
                <Dropdown 
                data={this.areas}
                containerStyle={styles.dropdown}
                onChangeText={this.handleAreaChange}
                label='Food regions options'
                disabled={!(this.state.meal === '' && this.state.ingredient === '' && (this.state.category === '' || this.state.category === 'none'))}
                />
                <Dropdown 
                containerStyle={styles.dropdown}
                data={this.categories}
                onChangeText={this.handleCategoryChange}
                label='Food category options'
                disabled={!(this.state.meal === '' && this.state.ingredient === '' && (this.state.area === '' || this.state.area === 'none'))}
                />
                <TouchableOpacity onPress={this.handleSubmit} disabled={this.state.meal === '' && this.state.ingredient === '' && (this.state.area === '' || this.state.area === 'none') && (this.state.category === '' || this.state.category === 'none')}>
                    <Text style={{color:'blue', alignSelf:'center'}}>Submit</Text>
                </TouchableOpacity>
            </KeyboardAvoidingView>
        )
    }
}

styles = StyleSheet.create({
    input: {
        borderWidth: 1,
        borderColor: 'black',
        minWidth: 100,
        marginTop: 20,
        marginHorizontal: 20,
        paddingHorizontal: 10,
        paddingVertical: 5,
        borderRadius: 3,
    },
    dropdown: {
        paddingTop: 15
      },
})

const mapStateToProps = state => ({
    recipes: state.recipes
})

export default connect(mapStateToProps, {getRecipes})(SearchScreen)

ResultsScreen. js (в настоящее время только рендеринг необработанных данных):

import React from 'react'
import {Text, View} from 'react-native'
import {connect} from 'react-redux'

class ResultsScreen extends React.Component {
    render() {
        return(
            <View>
                <Text>{this.props.recipes}</Text>
            </View>
        )
    }
}

const mapStateToProps = state => ({
    recipes: state.recipes
})

export default connect(mapStateToProps)(ResultsScreen)

Любая помощь приветствуется.