Question

我是React Native的新手，在尝试React导航时遇到错误。

如果我使用onPress = {（）=> this.props.navigation（“ FoodScreen”）}>

然后出现错误“ TypeError：this.props.navigation不是函数。”

我用Google搜索它，发现写了onPress = {（）=> navigate（），这让我遇到了这个错误

请为此提供帮助

这是我的App.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>
    );
  }
}

获取ReferenceError：找不到变量：导航React Native

0 个答案: