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

Question

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

我创建了 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>
      );
   }
}

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

我收到这个错误：

Cannot read property 'navigate' of underfined

Answer 1

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

import { withNavigation } from 'react-navigation';

...

export default withNavigation(ProductsType2)

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

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

Go to detail page in a React-Native Flatlist

react-native

react-navigation

react-native-flatlist