React-Navigation: навигация нажатием на изображения

Question

Я пытаюсь перемещаться по экранам, нажимая на определенные c изображения на SearchScreen.js. Каждое изображение ведет к другому экрану. В настоящее время я пытаюсь перейти от первого изображения к экрану meo_sw.js. Однако я не могу этого сделать и не понимаю почему. Вот код SearchScreen.js:

import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';

function SearchScreen() {
 return (
<View style={styles.screen}>
  <View style={styles.container}>
    <TextInput style={styles.inputBox}
              underlineColorAndroid='rgba(0,0,0,0)' 
              placeholder="Procura aqui"
              placeholderTextColor = "black"
              selectionColor="black"
              keyboardType="default"/>
  </View>
  <View style={styles.teste}> 
    <Text style={styles.festivais}>Recomendados</Text>
    <ScrollView horizontal={true} showsHorizontalScrollIndicator={false} style={styles.festivais_lista}>
      <TouchableOpacity>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image} onPress={() => navigation.navigate('meo_sw')}/>
      </TouchableOpacity>
      <TouchableOpacity>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} onPress={() => {}}/>
      </TouchableOpacity>
      <TouchableOpacity>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image} onPress={() => {}}/>
      </TouchableOpacity>
      <TouchableOpacity>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image} onPress={() => {}}/>
      </TouchableOpacity>
      <TouchableOpacity>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image} onPress={() => {}}/>
      </TouchableOpacity>
      <TouchableOpacity>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image} onPress={() => {}}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
  );
}

SearchScreen.navigationOptions = {
  title: 'Procurar',
};

const styles = StyleSheet.create({
 //I took this part off because it is useless for this especific question
});

export default SearchScreen;

А вот экран 'meo_sw. js':

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

const meo_sw = props => {

return(
    <View style={styles.header}>
        <Text style={styles.texto}>Meo Sudoeste</Text>
    </View>
    )
};

const styles=StyleSheet.create({
header:{
    width:'100%',
    height:90,
    paddingTop:36,
    backgroundColor: 'blue',
    alignItems: 'center',
    justifyContent: 'center'
},
texto:{
    color:'white',
    fontSize: 18
}
})

export default meo_sw;

Пожалуйста, помогите мне

Answer 1

вместо этого используйте hookrouter, современную альтернативу реагирующему маршрутизатору: https://www.npmjs.com/package/hookrouter

...
import { useRoutes, usePath, A} from "hookrouter";

navigate('/about');

, чтобы ответить на OP-вопрос о навигации по изображению. Нажмите:

...
 <TouchableOpacity>
     <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image} onPress={() => navigate('/meo_sw')}/>
 </TouchableOpacity>
...

Answer 2

Я бы предложил добавить Image в TouchableWithoutFeedback, а затем добавить onPress в TouchableWithoutFeedback. https://facebook.github.io/react-native/docs/touchablewithoutfeedback