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

时间:2019-04-18 15:44:37

标签: react-native react-navigation react-native-flatlist

点击一行后,我创建了一个Flatlist导航到详细信息屏幕。

我创建了4个文件。

文件1:

index.js

#include <stdio.h>
#include <stdlib.h>

typedef struct node_t {
  int num;
  struct node_t *next;
  struct node_t *prev;
} node_t;

void add_node (struct node_t **head, int num) {
  struct node_t *new = (struct node_t*)malloc(sizeof(struct node_t));
  struct node_t *last = *head;
  new->num = num;
  new->next = NULL;

  if (*head == NULL) {
    new->prev = NULL;
    *head = new;
    return;
  } else {
    while (last->next != NULL) {
      last = last->next;
    }
    last->next = new;
    new->prev = last;
  }
  return;
}

void swap_num(struct node_t **first, struct node_t **second) {
    struct node_t *temp;
    printf("%d %d\n", (*first)->num, (*second)->num);
    temp->num = (*first)->num;
    (*first)->num = (*second)->num;
    (*second)->num = temp->num;
}

void sort(struct node_t **head) {
  int swapped;
  struct node_t *temp;

  if (*head == NULL){
    printf("list is empty...\n");
    return;
  }
  do {
    swapped = 0;
    temp = *head;

    while (temp->next != NULL) {
      if (temp->num > temp->next->num) {
        swap_num(&temp, &(temp->next));
        swapped = 1;
      }
      temp = temp->next;
    }

  } while (swapped);
}

void print_list (struct node_t **head) {
  struct node_t *temp;

  if (*head != NULL) {
    temp = *head;
    while (temp != NULL) {
      printf("%d ", temp->num);
      temp = temp->next;
    }
    printf("\n");
  }
}

int main (void) {
  struct node_t *head = NULL;
  int new_num, x, y, kill;

  while (new_num != 0) {
    scanf("%d", &new_num);
    if (new_num != 0) {
      add_node(&head, new_num);
      print_list(&head);
    }
  }

  print_list(&head);
  sort(&head);
  printf("------------------\n");
  print_list(&head);
  return 0;

}

detail.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);

list.js

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

最后

products.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>

        );
      }

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

我收到此错误:

  

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

1 个答案:

答案 0 :(得分: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