转到 React-Native Flatlist 中的详细信息页面答案

【问题标题】：Go to detail page in a React-Native Flatlist转到 React-Native Flatlist 中的详细信息页面
【发布时间】：2019-04-18 15:44:36
【问题描述】：

单击一行时，我创建了一个平面列表导航到详细信息屏幕。

我创建了 4 个文件。

文件1：

index.js

import React from 'react';
import List from "./list";
import Detail from "./detail";
import { createStackNavigator, createAppContainer } from "react-navigation";

const AppNavigator = createStackNavigator({
  ListScreen: {
    screen: List,
  },
  DetailScreen: {
    screen: Detail,
  },
}, {
    initialRouteName: 'ListScreen',
});

export default createAppContainer(AppNavigator);

还有detail.js

export default class DetailScreen extends React.PureComponent  {
    render() {
      return (
        <View
          <Text>Home Details!</Text>
        </View>
      );
    }
}

list.js

    import Products from "./products";
    export default class ListScreen extends React.PureComponent  {
      ...

      renderItem({ item }) {
          return <Products product={item}/>
      }

      render() {
        return (

            <View style={{margin:5}}>
              <FlatList
                 data={this.state.products}
                 renderItem={this.renderItem}
                 keyExtractor={(item,index) => item.id.toString()}
              />
            </View>

        );
      }

最后

products.js

export default class ProductsType2 extends React.PureComponent {
  _onPress = () => {
    this.props.navigation.navigate('DetailScreen', this.props.product.id);
  };

  render() {
    const { product} = this.props;
    //const { navigate } = this.props.navigation; //get error w
    return (
      <Card>
          <CardItem cardBody button onPress={this._onPress}>
            <Image
              style={{height: 140, width: 140, flex: 1}}
              source={{uri: product.thumbnail}} />
          </CardItem>
        </Card>
      );
   }
}

当我按下它时，我无法显示详细信息屏幕。

我收到此错误：

无法读取未定义的属性“导航”

【问题讨论】：

尝试用 this.props.navigation.navigate 替换 this.navigation.navigate
@Syed 我更正了。我得到同样的错误。

标签： react-native react-navigation react-native-flatlist

【解决方案1】：

使用 withNavigation (HOC) 从 products.js 访问导航道具。该组件不在 createStackNavigator 内，因此使用 withNavigation 方法导出您的类，您可以访问导航道具。

import { withNavigation } from 'react-navigation';

...

export default withNavigation(ProductsType2)

https://reactnavigation.org/docs/en/connecting-navigation-prop.html

【讨论】：