Question

我试图通过按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

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

Answer 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>
...

Answer 3

您应该添加：

function xx({navigation}) {}

至少对我有用！

Answer 4

我认为可能存在这些问题

首先在navigation中传递function searchScreen({navigation})。
然后，onPress组件中没有<Image>道具，因此在onPress上使用<TouchableOpacity>。

反应导航：按图像导航

4 个答案: