React Native 中的 Algolia 和 Hooks 无法导航到其他页面答案

【问题标题】：Algolia and Hooks in React Native can't navigate to an other pageReact Native 中的 Algolia 和 Hooks 无法导航到其他页面
【发布时间】：2021-04-30 14:01:49
【问题描述】：

我正在使用带有 react Native 和 Expo 的 algolia，我创建了一个 connectInfiniteHits，并且我想在用户按下一个点击时导航到另一个页面，我有以下代码：

import React from "react";
import { StyleSheet, Text, View, FlatList, Image, TouchableOpacity, AsyncStorage } from "react-native";
import { connectInfiniteHits } from "react-instantsearch-native";
import PropTypes from 'prop-types';
import { useNavigation } from '@react-navigation/native';

const navigation = (id) => {
    const navigation = useNavigation();

    AsyncStorage.setItem("RepID", id);
    navigation.navigate("RepProfile");
}

const InfiniteHitsRep = ({ hits, hasMore, refine }) => (
    
    <View style={styles.container}>
        <FlatList
            data={hits}
            onEndReached={() => hasMore && refine()}
            onEndReachedThreshold={0}
            keyExtractor={item => item.objectID}
            initialNumToRender={10}
            ItemSeparatorComponent={() => <View style={styles.separator} />}
            renderItem={({ item }) => (

                <TouchableOpacity onPress={() => navigation(item.rep_id)} style={{ flexDirection: 'row', alignItems: 'center' }}>
                    <Image style={styles.image} source={{ uri: item.rep_img_url }} />
                    <Text style={{ flex: 3 }}>{item.rep_title} {item.rep_first_name} {item.rep_last_name}</Text>
                    <Image style={styles.image} source={{ uri: item.house_img_url }} />
                </TouchableOpacity>
            )}
        />
    </View>
)
);

InfiniteHitsRep.propTypes = {
    hits: PropTypes.arrayOf(PropTypes.object).isRequired,
    hasMore: PropTypes.bool.isRequired,
    refine: PropTypes.func.isRequired,
};

export default connectInfiniteHits(InfiniteHitsRep);

const styles = StyleSheet.create({
    container: {
        padding: 16,
    },
    separator: {
        marginTop: 16,
        marginBottom: 16,
        height: 1,
        backgroundColor: "#DDDDDD",
    },
    image: {
        flex: 1,
        width: 50,
        height: 50,
        borderRadius: 5,
        backgroundColor: 'white',
        resizeMode: 'contain',
    }
});

当我按下一个点击时，我会收到以下错误消息： [！[``` 错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。



  [1]: https://i.stack.imgur.com/yDYRg.png

【问题讨论】：

标签： react-native react-hooks algolia

【解决方案1】：

钩子只能在函数组件内部使用

把你的代码改成这个

import React from "react";
import {
  StyleSheet,
  Text,
  View,
  FlatList,
  Image,
  TouchableOpacity,
  AsyncStorage,
} from "react-native";
import { connectInfiniteHits } from "react-instantsearch-native";
import PropTypes from "prop-types";
import { useNavigation } from "@react-navigation/native";

const InfiniteHitsRep = ({ hits, hasMore, refine }) => {

  const navigation = useNavigation(); // Call hook here

  const navigation = (id) => {
    AsyncStorage.setItem("RepID", id);
    navigation.navigate("RepProfile"); // Use Here
  };

  return (
    <View style={styles.container}>
      <FlatList
        data={hits}
        onEndReached={() => hasMore && refine()}
        onEndReachedThreshold={0}
        keyExtractor={(item) => item.objectID}
        initialNumToRender={10}
        ItemSeparatorComponent={() => <View style={styles.separator} />}
        renderItem={({ item }) => (
          <TouchableOpacity
            onPress={() => navigation(item.rep_id)}
            style={{ flexDirection: "row", alignItems: "center" }}
          >
            <Image style={styles.image} source={{ uri: item.rep_img_url }} />
            <Text style={{ flex: 3 }}>
              {item.rep_title} {item.rep_first_name} {item.rep_last_name}
            </Text>
            <Image style={styles.image} source={{ uri: item.house_img_url }} />
          </TouchableOpacity>
        )}
      />
    </View>
  );
};

InfiniteHitsRep.propTypes = {
  hits: PropTypes.arrayOf(PropTypes.object).isRequired,
  hasMore: PropTypes.bool.isRequired,
  refine: PropTypes.func.isRequired,
};

export default connectInfiniteHits(InfiniteHitsRep);

const styles = StyleSheet.create({
  container: {
    padding: 16,
  },
  separator: {
    marginTop: 16,
    marginBottom: 16,
    height: 1,
    backgroundColor: "#DDDDDD",
  },
  image: {
    flex: 1,
    width: 50,
    height: 50,
    borderRadius: 5,
    backgroundColor: "white",
    resizeMode: "contain",
  },
});

【讨论】：