Получение ReferenceError: невозможно найти переменную: перейдите к React Native - PullRequest
Новая
       19

Получение ReferenceError: невозможно найти переменную: перейдите к React Native

0 голосов
/ 19 марта 2020

Я новичок в React Native и получаю сообщение об ошибке при попытке отреагировать на навигацию.

Если я использую onPress = {() => this.props.navigation ("FoodScreen")}}>

Затем появляется ошибка: «TypeError: this.props.navigation не является функцией».

Я гуглил его и обнаружил, что пишу onPress = {() => navigate (), что и привело меня к этой ошибке

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

Это мое приложение. js

import React,{Component} from 'react';
import {Text,View,ScrollView} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';

import HeaderWnd from './HeaderWnd';
import PromoFoodItem from './PromoFoodItem';

let burgerImage = require('./Images/burger.jpg');
let chickenImage = require('./Images/chicken.jpg');
let pizzaImage = require('./Images/pizza.jpg');

export default class App extends Component
{
  render()
  {
    //const {navigate} = this.props.navigation;
    return(
      <View>
        <HeaderWnd/>
        <ScrollView>
        <PromoFoodItem navigation={this.props.navigation}
        image={burgerImage} text={'BURGER'}/>
        <PromoFoodItem image={chickenImage} text={'CHICKEN'}/>
        <PromoFoodItem image={pizzaImage} text={'PIZZA'}/>
        </ScrollView>
      </View>
    );
  }
}

PromoFoodItem. js

import React,{Component} from 'react';
import {Text,View,Image,TouchableOpacity} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';

import styles from './PromoFoodItemStyle';
import FoodScreen from './FoodSceen';
//let fooditemone = require('./Images/burger.jpg');


export default class PromoFoodItem extends Component
{
  render()
  {
    return(
      //<TouchableOpacity onPress={()=>alert(this.props.text)}>
      <TouchableOpacity onPress={()=>navigate("FoodScreen")}>
      <View style={styles.foodCard} >
      <View>
        <Image style={styles.PromoImage} source={this.props.image} resizeMode='contain' blurRadius={1.5}/>
      </View>
      <View style={styles.textView}>
    <Text style={styles.foodTitle}>{this.props.text}</Text>
      </View>
      </View>
      </TouchableOpacity>
    );
  }
}

FoodScreen. js 

import React,{Component} from 'react';
import {Text,View,} from 'react-native';
import { Container,Header,Left,Right,Body } from 'native-base';

import styles from './FoodScreenStyle';
import HeaderFood from './HeaderFood';
export default class FoodScreen extends Component
{
  render()
  {
    return(
      <View>
          <HeaderFood/>
      </View>
    );
  }
}

HeaderFood. js

import React,{Component} from 'react';
import {Text,View} from 'react-native';
import {Container,Header,Left,Right,Body,Button, Icon} from 'native-base';

import styles from './HeaderWndStyle';
export default class HeaderFood extends Component
{

handleClick = () => {
  alert('Back Button Pressed!');
}
  render()
  {
    return(
        <Container style={styles.headerContainer}>
        <Header style={styles.headerStyle}>
          <Left style={{flex:1}}>
          <Button transparent onPress={this.handleClick}>
          <Icon style= {styles.iconStyle} name='md-arrow-back'/>
         </Button>
          </Left >
          <Body style={{flex:1}}>
            <Text style={styles.textStyle}>
              Foodstagram
            </Text>
          </Body>
          <Right style={{flex:1}}>
          <Button transparent onPress={()=> alert("Right button Pressed")}>
          <Icon style= {styles.iconStyle} type='FontAwesome' name='shopping-cart'/>
         </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}
...