React-Navigation：按图像导航答案

【问题标题】：React-Navigation: Navigating by pressing imagesReact-Navigation：按图像导航
【发布时间】：2020-02-20 17:53:56
【问题描述】：

我正在尝试通过按下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;

请帮帮我

【问题讨论】：

尝试在 TouchableOpacity 上添加 onPress

标签： javascript react-native react-native-android react-navigation react-native-navigation

【解决方案1】：

我的建议是将Image 包装在TouchableWithoutFeedback 中，然后在TouchableWithoutFeedback 上添加onPress。 https://facebook.github.io/react-native/docs/touchablewithoutfeedback

【讨论】：

是的，先生，这是另一种选择。但是我更喜欢使用默认的，即 TouchableOpacity，因为我只是专注于解决我在这里宣布的问题。
将 onPress 添加到 TouchableOpacity 而不是 Image。

【解决方案2】：

改用 hookrouter，这是 react-router 的现代替代品：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>
...

【讨论】：

同样的错误是什么？你一开始就没有提到。

【解决方案3】：

你应该添加：

function xx({navigation}) {}

至少对我有用！

【讨论】：

【解决方案4】：

我认为可能存在这些问题

首先在function searchScreen({navigation})中传递navigation。
那么在<Image> 组件中没有可用的onPress 属性，所以在<TouchableOpacity> 上使用onPress。

【讨论】：