Ich habe Probleme mit this.props.navigation.navigate in reagieren native

Question

Ich habe versucht, eine berührbare Highlight erstellen, die mir eine neue Szene mit this.props.navigation.navigate für eine reaktionsnative App. Nativ reagiert jedoch mit einem Fehler, der besagt, dass undefined kein Objekt ist (Bewertung '_this2.props.navigation'). Hier ist mein 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> 
); 
} 

Irgendwelche Ideen, wie es behoben werden?

Answer 1

Obwohl @justelouise richtig ist und der

StackNavigator Definiton

Teil des Codes helfen würde, noch, wenn Sie auf dieser Seite mit Stack-Navigator gesteuert haben dann ist es hinzugefügt worden der Stick-Navigator schon.

Ich denke, this.props.navigation ist unter der render() Methode verfügbar. Wenn Sie es in einer anderen Methode verwenden möchten, müssen Sie es von render() an die gewünschte Methode übergeben. Etwas wie dieses:

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