"Ошибка типа: this.props.navigation.getParam не является функцией React Native." Я пытаюсь передать переменные между экранами

Question

Я прикрепил оба экрана, где я передаю переменную. имена экранов: bookView. js и mainScreen. js Приложение. js

        import 'react-native-gesture-handler';
        import React, { Component } from 'react'
        import { Text, View, TouchableOpacity, Alert } from 'react-native'
        import { NavigationContainer } from '@react-navigation/native';
        import { createStackNavigator } from '@react-navigation/stack';
        import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
        import LoginScreen from './screens/loginScreen';
        import SignupScreen from './screens/signupScreen';
        import MainScreen from './screens/mainScreen';
        import Account from './screens/account';
        import BookView from './screens/bookView';
        import Icons from 'react-native-vector-icons/MaterialIcons'
        import Icon from 'react-native-vector-icons/AntDesign';
        import * as firebase from 'firebase';

        const firebaseConfig = {
          apiKey: "AIzaSyCDq-LcDcnKeGkOfaLCVX72lm9SkW9L8lk",
          authDomain: "read-75469.firebaseapp.com",
          databaseURL: "https://read-75469.firebaseio.com",
          projectId: "read-75469",
          storageBucket: "read-75469.appspot.com",
        };

        //firebase.initializeApp(firebaseConfig);

        const Stack = createStackNavigator();
        const Tab = createBottomTabNavigator();


        export default class App extends Component {

            MainActivity({navigation}) {
            return(
              <Stack.Navigator>
                <Stack.Screen name = 'Read' component = {MainScreen}
                options =  {{
                  headerRight: () => (
                    <TouchableOpacity
                          style={{ marginRight: 30 }}
                          onPress={() => console.log("search clicked")}
                          >

                            <Icon name="search1" size={23} color="#fff"/>

                      </TouchableOpacity>
                  ),
                  headerStyle: {
                    backgroundColor: '#101F37'
                  },
                  headerTitleStyle: {
                    fontWeight: 'normal',
                  },
                  headerTintColor: 'white',
                }} />
                </Stack.Navigator>
            );
          } 

          Tabs = () => {
            return(
            <Tab.Navigator
            screenOptions={({ route }) => ({

              tabBarIcon: ({ color }) => {
                let iconName;

                if (route.name === 'Home') {
                  return <Icon name = "home" size = {25} color = {color} />;
                } else if (route.name === 'Account') {
                  return <Icon name= "user" size={28} color={color} />;
                }

              },
            })}
            tabBarOptions={{
              activeTintColor: '#fe346e',
              inactiveTintColor: 'gray',
              style: {
                backgroundColor: '#101F37'
              }
            }}
          >
              <Tab.Screen name = "Home" component = {this.MainActivity} />
              <Tab.Screen name = "Account" component = {Account} />
            </Tab.Navigator>
            )
          }


          render() {

            return (
              <NavigationContainer>
                <Stack.Navigator headerMode = 'none' >
                  <Stack.Screen name = "Tabs" component = {this.Tabs} options={{title: "Read"}} />
                  <Stack.Screen name ="Login" component = {LoginScreen} />
                  <Stack.Screen name = "Signup" component = {SignupScreen} />
                  <Stack.Screen name = "Account" component = {Account} />
                  <Stack.Screen name = "BookView" component = {BookView} />
                </Stack.Navigator>
              </NavigationContainer>
            )
          }
        }

Я хочу взять uri из mainScreen. js и передать его в bookView. js

mainScreen. js

                import React, { Fragment, Component } from 'react';
                import { View, Text, FlatList, Dimensions, Image, ScrollView } from 'react-native';
                import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';


                export const data = [
                    { uri: require('../assets/b2.jpg'), key: 1, },
                    { uri: require('../assets/b1.png'), key: 2, },
                    { uri: require('../assets/b3.png'), key: 3, },
                    { uri: require('../assets/b4.jpg'), key: 4, },
                    { uri: require('../assets/b5.jpeg'), key: 5, },
                    { uri: require('../assets/b6.jpg'), key: 6, },
                    { uri: require('../assets/b7.jpg'), key: 7, },
                    { uri: require('../assets/b8.jpg'), key: 8, },
                    { uri: require('../assets/b9.jpg'), key: 9, },
                    { uri: require('../assets/b10.jpg'), key: 10, },
                    { uri: require('../assets/b11.jpg'), key: 11, },
                    { uri: require('../assets/b12.jpg'), key: 12, },
                    { uri: require('../assets/b13.jpg'), key: 13, },
                    { uri: require('../assets/b14.jpg'), key: 14, },
                    { uri: require('../assets/b15.png'), key: 15, },
                    { uri: require('../assets/b16.jpg'), key: 16, },
                    // { uri: '', key: 17, },{ uri: '', key: 18, },{ uri: '', key: 19, },{ uri: '', key: 20, },
                    // { uri: '', key: 21, },{ uri: '', key: 22, },{ uri: '', key: 23, },{ uri: '', key: 24, },{ uri: '', key: 25, },
                    // { uri: '', key: 26, },{ uri: '', key: 27, },{ uri: '', key: 28, },{ uri: '', key: 29, },{ uri: '', key: 30, },

                ]

                const ItemWidth = Dimensions.get('window').width;

                export default class MainScreen extends Component  {
                    render() {
                    return (
                        <FlatList 
                            numColumns = {2}
                            style = {{margin:5}}
                            data={data}
                            renderItem = {({ item }) => (
                                <Card style = {{width: (ItemWidth/2)-20, backgroundColor: 'grey', margin: 5}} onPress={() => this.props.navigation.navigate('BookView',  { 
                                    text: 'Hello from screen 1' 
                                })} >
                                    <Card.Cover source = {item.uri} />
                                </Card>
                            )}
                            keyExtractor = {(item) => item.key}
                        />
                    )
                }
                }

Здесь я хочу получить uri, который я передаю с mainScreen. js для отображения изображения с source = {uri}, переданного с mainScreen . js

bookView. js

                import React, { Component } from 'react'
                import { View, Text, StyleSheet } from 'react-native'

                export default class BookView extends Component {
                    render() {
                        const text =  this.props.navigation.getParam('text', 'nothing')
                        return (
                            <View>
                                <Text>{text}  </Text>
                            </View>
                        )
                }
                }
                const styles = StyleSheet.create({

                });