반응 네이티브에서 this.props.navigation.navigate와 관련된 문제가 발생했습니다.

Question

반응이있는 앱에 this.props.navigation.navigate를 사용하여 새로운 장면을 차지하는 터치 가능한 하이라이트를 만들어 내려고 노력했습니다. 그러나 native 네임은 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> 
    ) 
    } 
}