时间戳

首页 > 解决方案 > React-Navigation：按图像导航

javascript - React-Navigation：按图像导航

问题描述

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

请帮我

标签： javascriptreact-nativereact-native-androidreact-navigationreact-native-navigation

解决方案

我觉得可能有这些问题

  • 首先通过navigation.function searchScreen({navigation})

  • 然后组件中没有onPress可用的道具，<Image>因此请使用onPresson <TouchableOpacity>。

推荐阅读