我在本机反应中与此this.props.navigation.navigate有问题

Question

I have been trying to create a touchable highlight that takes to me a new scene by using this.props.navigation.navigate for a react-native app. However, react native gives me an error that says undefined is not an object (evaluating '_this2.props.navigation'). Here is my code:

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
View,
ListView,
Image,
Text,
ScrollView,
TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';

const squadIcon = require('../../img/serioussquad.jpg');

class BeerList extends Component {
 constructor(props) {
 super(props);
 var ds = new ListView.DataSource({
   rowHasChanged: (r1, r2) => r1 !== r2
 });

 this.state = {
 dataSource: ds.cloneWithRows(beerlist),
 };

 }


 renderRow(beer) {

return (
  <View style={styles.row}>
    <Image style = {styles.icon} source  = {squadIcon}/>
    <View style={styles.info}>
    <TouchableHighlight onPress={() => this.props.navigation.navigate('BeerDetails')}>
      <Text style={styles.items}>
      {beer.name} 
      </Text>
      </TouchableHighlight>
    </View>
    <View style={styles.total}>
      <Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
    </View>
  </View>
);
}

Any ideas on how to get it fixed?

Answer 1

Although @justelouise is right and the

StackNavigator Definiton

part of the code would help, still, if you've navigated to this page using stack navigator then it's been added to the stick navigator already.

I think this.props.navigation is available under the render() method. If you want to use it in another method, then you have to pass it from render() to the method you want. Something like this:

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  View,
  ListView,
  Image,
  Text,
  ScrollView,
  TouchableHighlight
} from 'react-native';
import { DrawerNavigator } from 'react-navigation';
import { List, ListItem } from 'react-native-elements';
import beerlist from '../datbeerlist.json';
import BeerDetails from './BeerDetails';

const squadIcon = require('../../img/serioussquad.jpg');

class BeerList extends Component {
  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
      rowHasChanged: (r1, r2) => r1 !== r2
    });

    this.state = {
      dataSource: ds.cloneWithRows(beerlist),
    };
  }


  renderRow (beer, renderNavigation) {
    return (
      <View style={styles.row}>
        <Image style={styles.icon} source={squadIcon}/>
        <View style={styles.info}>
          <TouchableHighlight onPress={() => renderNavigation.navigate('BeerDetails')}>
            <Text style={styles.items}>
              {beer.name} 
            </Text>
          </TouchableHighlight>
        </View>
        <View style={styles.total}>
          <Text style={styles.price}>${(beer.price / 100).toFixed(2)}</Text>
        </View>
      </View>
    );

  render () {
    const navigation = this.props.navigation;
    return (
      <View>
        {this.renderRow(BEER, navigation)}
      </View>
    )
  }
}

Answer 2

If you are navigating to stackNavigator outside of render() then try this

static navigationOptions = ({ navigation })=>{
        const { navigate } = navigation
        return{
            title: 'Header Text',
            headerRight:(<Button 
            title="Settings" backgroundColor="rgba(0,0,0,0)" color="rgba(0,122,255,1)"
            onPress={() =>navigate('settings')}
        />)
        } 
    }