Навигация, нажимая изображения - PullRequest
Новая
       38

Навигация, нажимая изображения

1 голос
/ 22 февраля 2020

screenshot

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

import React from 'react';
import { ScrollView, StyleSheet, TextInput, Text, View, Image, TouchableOpacity, TouchableWithoutFeedback} 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 onPress={() => navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('nos_primavera')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
);
}

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

const styles = StyleSheet.create({
 //I took this off because it's irrelevant for the question itself
});

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({
//Irrelevant
})

export default meo_sw;

Ошибка говорит просто:

ReferenceError: Невозможно найти переменную: navigate

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

ОБНОВЛЕНО

Это MainTabNavigator.js : 

import React from 'react';
import { Platform } from 'react-native';
import { createStackNavigator } from 'react-navigation-stack';
import { createBottomTabNavigator } from 'react-navigation-tabs';

import TabBarIcon from '../components/TabBarIcon';
import HomeScreen from '../screens/HomeScreen';
import SearchScreen from '../screens/SearchScreen';
import SettingsScreen from '../screens/SettingsScreen';
import ChatScreen from '../screens/ChatScreen';
import CalendarScreen from '../screens/CalendarScreen';
import meo_sw from '../Eventos/Festivais/meo_sw';

const config = Platform.select({
  web: { headerMode: 'screen' },
  default: {},
});

//Home

const HomeStack = createStackNavigator(
  {
HomeScreen: {screen: HomeScreen},
SearchScreen: {screen: SearchScreen},
ChatScreen: {screen: ChatScreen},
SettingsScreen: {screen: SettingsScreen},
CalendarScreen: {screen: CalendarScreen},
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};

HomeStack.path = '';

//Search

const SearchStack = createStackNavigator(
  {
    Search: SearchScreen,
  },
  config
);

SearchStack.navigationOptions = {
  tabBarLabel: 'Procurar',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-search' : 'md-search'} />
  ),
};

SearchStack.path = '';

//Chat

const ChatStack = createStackNavigator(
  {
    Chat: ChatScreen,
  },
  config
);

ChatStack.navigationOptions = {
  tabBarLabel: 'Chat',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-chatboxes${focused ? '' : '-outline'}`
          : 'md-chatboxes'
      }
    />
  ),
};

ChatStack.path = '';


//Settings

const SettingsStack = createStackNavigator(
  {
    Settings: SettingsScreen,
  },
  config
);

SettingsStack.navigationOptions = {
  tabBarLabel: 'Perfil',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-person' : 'md-person'} />
  ),
};

SettingsStack.path = '';

//Calendar

const CalendarStack = createStackNavigator(
  {
    Calendar: CalendarScreen,
  },
  config
);

 CalendarStack.navigationOptions = {
  tabBarLabel: 'Calendário',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon focused={focused} name={Platform.OS === 'ios' ? 'ios-calendar' : 'md-calendar'} />
  ),
};

CalendarStack.path = '';

//Bottom tab navigator

const tabNavigator = createBottomTabNavigator({
  SearchStack,
  CalendarStack,
  HomeStack,
  ChatStack,
  SettingsStack
});

tabNavigator.path = '';


export default tabNavigator;

А это AppNavigator.js: 

import React from 'react';
import { createAppContainer, createSwitchNavigator } from 'react-navigation';
import MainTabNavigator from './MainTabNavigator';

export default createAppContainer(
  createSwitchNavigator({
    Main: MainTabNavigator,
  })
);

Ответы [ 2 ]

1 голос
/ 22 февраля 2020

Передайте объект навигации как реквизит. 

function SearchScreen({ navigation }) {
 ....
}

Используйте его как 

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

Добавьте экран к одному из ваших навигаторов, как показано ниже. 

const HomeStack = createStackNavigator(
  {
    HomeScreen: { screen: HomeScreen },
    SearchScreen: { screen: SearchScreen },
    ChatScreen: { screen: ChatScreen },
    SettingsScreen: { screen: SettingsScreen },
    CalendarScreen: { screen: CalendarScreen },
    meo_sw: { screen: meo_sw}
  },
  config
);

HomeStack.navigationOptions = {
  tabBarLabel: 'Home',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={
        Platform.OS === 'ios'
          ? `ios-home${focused ? '' : '-outline'}`
          : 'md-home'
      }
    />
  ),
};

Экспо пример

0 голосов
/ 22 февраля 2020

ваша функция не может получить реквизит, чтобы не импортировать свойство навигации !! измените функцию на класс и получите реквизит в классе, а затем попробуйте перемещаться. попробуйте этот код 

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

  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 onPress={() => this.props.navigation.navigate('meo_sw')}>
        <Image source={require('../assets/images/meo_sudoeste.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('vodaf_coura')}>
        <Image source={require('../assets/images/vodafone_coura.png')} style={styles.image} />
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('superR_superB')}>
        <Image source={require('../assets/images/superbock_superrock.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('nos_primavera')}>
        <Image source={require('../assets/images/nos_primavera.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('rock_in_rio')}>
        <Image source={require('../assets/images/rock_in_rio.png')} style={styles.image}/>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => this.props.navigation.navigate('edp_cool_jazz')}>
        <Image source={require('../assets/images/edp_cooljazz.png')} style={styles.image}/>
      </TouchableOpacity>
    </ScrollView>
  </View>
</View>
);
}

Надеюсь, это поможет, не стесняйтесь сомнений.

...