Javascript 我对这个.props.navigation.navigation有问题

我一直在尝试使用react原生应用程序的this.props.navigation.navigate创建一个可触摸的高光，为我带来一个新场景。但是，react native给了我一个错误，说undefined不是一个对象（计算“\u 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>
);
}

import React，{Component}来自'React'；
进口{
评估学，
样式表，
看法
ListView，
形象,，
文本，
滚动视图，
可触摸高光
}从“反应本机”；
从“react navigation”导入{DroperNavigator}；
从“react native elements”导入{List，ListItem}；
从“../datbeerlist.json”导入beerlist；
从“./BeerDetails”导入BeerDetails；
const squadIcon=require（'../../img/serioussquad.jpg'）；
类BeerList扩展了组件{
建造师（道具）{
超级（道具）；
var ds=new ListView.DataSource({
行已更改：（r1，r2）=>r1！==r2
});
此.state={
数据源：ds.cloneWithRows（beerlist），
};
}
伦德罗（啤酒）{
返回(
this.props.navigation.navigate（'BeerDetails'）}>
{beer.name}
${（beer.price/100）.toFixed（2）}
);
}

---

关于如何修复它有什么想法吗？

尽管@justelouise是正确的，而且

斯塔克导航定义

如果您已经使用stack navigator导航到此页面，那么部分代码仍然会有所帮助，因为它已经添加到了stick navigator中

我认为

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

import React，{Component}来自'React'；
进口{
评估学，
样式表，
看法
ListView，
形象,，
文本，
滚动视图，
可触摸高光
}从“反应本机”；
从“react navigation”导入{DroperNavigator}；
从“react native elements”导入{List，ListItem}；
从“../datbeerlist.json”导入beerlist；
从“./BeerDetails”导入BeerDetails；
const squadIcon=require（'../../img/serioussquad.jpg'）；
类BeerList扩展了组件{
建造师（道具）{
超级（道具）；
var ds=new ListView.DataSource({
行已更改：（r1，r2）=>r1！==r2
});
此.state={
数据源：ds.cloneWithRows（beerlist），
};
}
renderRow（啤酒、狂欢节）{
返回(
renderNavigation.navigate（'BeerDetails'）}>
{beer.name}
${（beer.price/100）.toFixed（2）}
);
渲染（）{
常量导航=this.props.navigation；
返回(
{this.renderRow（啤酒，导航）}
)
}
}

如果您在

render（）

之外导航到

stackNavigator

，请尝试以下操作

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

静态导航选项=（{navigation}）=>{
常量{navigate}=navigation
返回{
标题：“标题文本”，
headerRight:（导航（‘设置’）}
/>)
} 
}

您正在使用Redux吗？如何导航到此组件？我正在使用堆栈导航器和react Navigation如何配置导航器？BeerList组件应该位于navigator组件（堆栈/抽屉）navigator中。如果在这里也包含这部分代码，那就太好了。：）