Перейти на страницу с подробной информацией в React-Native Flatlist

Question

Я сделал Flatlist, переходя к подробному экрану при щелчке строки.

Я создал 4 файла.

file1:

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

, когда я нажимаю его, я не могу отобразить экран подробностей.

Я получаю эту ошибку:

Невозможно прочитать свойство 'navigate' из недоопределенного

Answer 1

используется с навигацией (HOC) для доступа к навигационным реквизитам из products.js. Этот компонент не находится внутри createStackNavigator, поэтому экспортируйте свой класс с помощью метода withNavigation, и вы сможете получить доступ к навигационным реквизитам.

import { withNavigation } from 'react-navigation';

...

export default withNavigation(ProductsType2)

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