React-Navigation：屏幕之间的导航

Question

I am trying to navigate between different screens by pressing image components. Each different image leads to a different screen.

I am firstly trying to navigate by clicking 'meo.sudoeste.png' to 'meo_sw'. However whenever I press the image nothing happens. This is my SearchScreen.js :

import React from 'react';
import {View, Text, StyleSheet, TouchableOpacity, TextInput, ScrollView, Image} from 'react-native';
import * as firebase from 'firebase';
import Icon from 'react-native-vector-icons/Ionicons';
import { StackNavigator } from 'react-navigation';

export default class HomeScreen extends React.Component { 
constructor(props) {
  super(props);
  this.state = {    }
    }

render() {      
    return (
    <View style={styles.screen}>
      <View style={styles.container}>
        <View>
          <Icon name={"ios-search"} style={styles.icon}/>
        </View>
        <TextInput style={styles.inputBox}
                  underlineColorAndroid='rgba(0,0,0,0)' 
                  placeholder="Procura aqui"
                  placeholderTextColor = "black"
                  selectionColor="black"
                  keyboardType="default"/>
      </View>
        <ScrollView style={styles.teste}> 
          <Text style={styles.festivais}>Recomendados</Text>
            <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
              <TouchableOpacity onPress={() => this.props.navigation.navigate('meo_sw')}>
                <Image source={require('../assets/meo_sudoeste.png')} style={styles.image}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => navigation.navigate('vodaf_coura')}>
                <Image source={require('../assets/vodafone_coura.png')} style={styles.image} />
              </TouchableOpacity>
              <TouchableOpacity onPress={() => navigation.navigate('superR_superB')}>
                <Image source={require('../assets/superbock_superrock.png')} style={styles.image}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => navigation.navigate('nos')}>
                <Image source={require('../assets/nos_primavera.png')} style={styles.image}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => navigation.navigate('rock_in_rio')}>
                <Image source={require('../assets/rock_in_rio.png')} style={styles.image}/>
              </TouchableOpacity>
              <TouchableOpacity onPress={() => navigation.navigate('edp_cool_jazz')}>
                <Image source={require('../assets/edp_cooljazz.png')} style={styles.image}/>
              </TouchableOpacity>
            </ScrollView>                    
      </ScrollView>
    </View>
  );       
}
  }


const styles = StyleSheet.create({
  // I took this off because it is irrelevant.
});

Could you please help me?

UPDATE

This is my App.js:

import React from 'react';
import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createBottomTabNavigator} from 'react-navigation-tabs'
import {Ionicons} from '@expo/vector-icons';

import ChatScreen from './screens/ChatScreen';
import PostScreen from './screens/PostScreen';
import NotificationScreen from './screens/NotificationScreen';
import ProfileScreen from './screens/ProfileScreen';
import LoadingScreen from './screens/LoadingScreen';
import LoginScreen from './screens/LoginScreen';
import RegisterScreen from './screens/RegisterScreen';
import HomeScreen from './screens/HomeScreen';
import firebaseConfig from './config';
import * as firebase from 'firebase';

import meo_sw from '../Eventos/Festivais/meo_sw';

   const AppContainer = createStackNavigator(
{
  default: createBottomTabNavigator(
    {
        Home: {
          screen: HomeScreen,
          navigationOptions: {
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-home' size={30} color={tintColor}></Ionicons>
          }
        },
        Chat: {
          screen: ChatScreen,
          navigationOptions: {
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-chatboxes' size={30} color={tintColor}> </Ionicons>
          }
        },
        Home: {
          screen: HomeScreen,
          navigationOptions: {
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-home' size={30} color={tintColor} style={{
              shadowColor:'#E9446A', 
              shadowOffset:{
               width:0, 
               heigth:0, 
               shadowRadius:10, 
               shadowOpacity:0.3}}}></Ionicons>
          }
        },
        Post: {
          screen: PostScreen,
          navigationOptions: {
            tabBarIcon: ({tintColor}) => 
            <Ionicons name='ios-add-circle' 
              size={48} color={tintColor}>
            </Ionicons>
          }
        },
        Notification: {
          screen: NotificationScreen,
          navigationOptions: {
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-notifications' size={30} color={tintColor}> </Ionicons>
          }
        },
        Profile: {
          screen: ProfileScreen,
          navigationOptions: {
            tabBarIcon: ({tintColor}) => <Ionicons name='ios-person' size={30} color={tintColor}> </Ionicons>
          }
        }
      },
      {
        defaultNavigationOptions:{
          tabBarOnPress: ({navigation, defaultHandler}) => {
            if (navigation.state.key === 'Post') {
              navigation.navigate('postModal')
            } else {
              defaultHandler()
            }
          }
        },
        tabBarOptions: {
          activeTintColor: '#FFA200',
          inactiveTintColor: '#B8B8C4',
          showLabel: false
        }
      }
  ),
  postModal: {
    screen: PostScreen
  }
},
{
  mode: 'modal',
  headerMode:'none'
}
 )

  const AuthStack= createStackNavigator({
  Login: LoginScreen,
  Register: RegisterScreen
  })

  export default createAppContainer(
  createSwitchNavigator(
      {
          Loading: LoadingScreen,
          App: AppContainer,
          Auth: AuthStack
      },
      {
            initialRouteName: 'Loading'
          }       
      )
  )

Answer 1

In order to navigate to another screen that screen must be included in AppContainer .

If you want to navigate to meo_sw screen using this.props.navigation.navigate('meo_sw') , Create a new screen called meo_sw & place that inside the AppContainer .

Hope this helps you. Feel free for doubts.