反応ネイティブのthis.props.navigation.navigateで問題が発生しました

Question

反応のあるネイティブアプリでthis.props.navigation.navigateを使用することで、新しいシーンを手に入れたタッチ可能なハイライトを作成しようとしています。しかし、ネイティブの反応では、undefinedがオブジェクトではないというエラーが表示されます（ '_this2.props.navigation'を評価する）。ここに私のコードです：

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> 
); 
} 

どのように修正するためのアイデア？あなたがスタックナビゲーターを使用してこのページにナビゲートした場合

Answer 1

@justelouiseが正しいと

StackNavigator Definiton

が、コードの一部が役立つだろうが、それでも、それがに追加されていますスティックナビゲータは既に。

this.props.navigationは、render()の方法で利用できると思います。別の方法で使用したい場合は、render()から必要なメソッドに渡す必要があります。このようなもの：

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> 
    ) 
    } 
}