React Navigation не работает, не возвращается запрашиваемый экран

Question

У меня возникли проблемы при реализации навигации в моем приложении React.

Я не понимаю, почему не работает. Когда я нажимаю свой уровень, он не возвращает мне экран Play, ошибок нет, просто ничего не происходит.

И, кстати, я так и не понял, в чем разница при выполнении <Component onPress={this.onPress}/> и <Component onPress={() => {this.onPress}} /> et когда их использовать. Если бы кто-то мог мне с этим помочь, было бы здорово! (возможно, проблема здесь в этом)

// App.js
import 'react-native-gesture-handler';
import React, { Component } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import Play from './Vue/Play'
import Accueil from './Vue/Accueil'
import {Provider} from 'react-redux'
import {ReduxAccueil, ReduxPlay} from './Containers/AppContainers'
import {store} from './store/store'
import LevelStackNavigator from './Navigation/LevelsNavigation'

export default function App() {
  return (
    <Provider store={store}>
      {/* <View style={styles.container}> */}
      <LevelStackNavigator/>
      {/* </View> */}
    </Provider>
    
  );
}

// LevelsNavigation.js
import { createStackNavigator } from '@react-navigation/stack'
import {NavigationContainer} from '@react-navigation/native'
import Accueil from '../Vue/Accueil'
import Play from '../Vue/Play'
import React, {Component} from 'react'
import {ReduxAccueil, ReduxPlay} from '../Containers/AppContainers'

const Stack = createStackNavigator()

const LevelStackNavigator = () => {
    return (
    <NavigationContainer>
        <Stack.Navigator initialRouteName='Level'>
            <Stack.Screen name="Accueil" component={ReduxAccueil} />
            <Stack.Screen name="Play" component={ReduxPlay} />
        </Stack.Navigator>
    </NavigationContainer>
    )
    
}

export default LevelStackNavigator

// AppContainers.js
import {connect, dispatch} from 'react-redux'
import {setLevel} from '../actions/index'
import Accueil from '../Vue/Accueil'
import Play from '../Vue/Play'
import LevelStackNavigator from '../Navigation/LevelsNavigation'

const mapStateToProps = (state) => {
    return {
        level : state
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        setLevel: (level) =>{
            dispatch(setLevel(level))
        }
    }
}

const ReduxAccueil = connect(mapStateToProps, mapDispatchToProps)(Accueil)
const ReduxPlay = connect(mapStateToProps, mapDispatchToProps)(Play)

export {
    ReduxAccueil,
    ReduxPlay
}

// Accueil.js
import React, {Component} from 'react'
import {View, StyleSheet, Text} from 'react-native'
import Levels from '../Components/Niveaux'

class Accueil extends Component{
    constructor(props){
        super(props);

        
    }


    render(){
        return(
            <Levels setLevel={this.props.setLevel} navigation = {() => this.props.navigation.navigate('Play')}/>
                
        )
    }
}

export default Accueil

// Niveaux.js
import React, {Component} from 'react'
import {View, StyleSheet, Text, TouchableHighlight, Alert} from 'react-native'
import {withNavigation} from 'react-navigation'
var levels = [... Array(80).keys()]

class Levels extends Component {
    constructor(props){
        super(props);
        this.onPress = this.onPress.bind(this)
    }

    onPress(level) {
        this.props.setLevel(level)
        this.props.navigation
    }

    render(){
        return(
            <View style={styles.container}>
                {levels.map(
                x =>  { return (
                    <View style = {styles.level} key={'level' + x+1}>
                        <TouchableHighlight onPress = {() => this.onPress(x+1)}>
                            <Text>{x + 1}</Text>
                        </ TouchableHighlight>
                    </View>
                )
                }
            )
    }
            </View>
            
        )
    }
}

У вас есть идеи? Спасибо!