如何在 React Native 6 中使用导航调用我们自己的构建

Question

帮助，

首先，React Native 6 或 5 有 withNavigation 吗？我在 React Native 网站的文档中找不到它。

所以，我找到了一些线程，我们可以像这样构建自己的 withNavigation ：

withNavigation.js

import React from 'react';
import { useNavigation } from '@react-navigation/native'; // not sure package name


export const withNavigation = (Component) => {
  return (props) => {
    const navigation = useNavigation();

    return <Component navigation={navigation} {...props} />;
  };
};

但我不知道如何调用或使用自己的构建 withNavigation。

这是我的源代码：

ResultList.js

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import { FlatList, TouchableOpacity } from 'react-native-gesture-handler';
import ResultsDetail from './ResultsDetail';
import { withNavigation } from '../helper/withNavigation';

const ResultList = ({ title, results }) => {
    console.log(withNavigation.component);
    return (
        <View style={styles.container}> 
            <Text style={styles.title}>{title}</Text>            
            <FlatList
                horizontal={true}
                showsHorizontalScrollIndicator={false}
                data={results}
                keyExtractor={(results) => results.id}
                renderItem={({item}) => {
                    return (
                        <TouchableOpacity onPress={() => withNavigation('ResultShowScreen')}>
                            <ResultsDetail results={item} />
                        </TouchableOpacity>
                    )
                }}

            />
        </View>
    )
};

const styles = StyleSheet.create({    
    title: {
        fontSize: 18,
        fontWeight: 'bold',
        marginLeft: 15,
        marginBottom: 5,

    },
    container: {
        marginBottom: 10
    }
});

export default ResultList;

在这里：

console.log(withNavigation.component)

它显示：未定义

如何用我们自己的 withNavigation 获取导航道具？

谢谢

Answer 1

由于您的辅助函数withNavigation 是Higher-Order Component (HoC)，您必须用它包装您的组件才能使用它：

const ResultList = ({ title, results, navigation }) => {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        data={results}
        keyExtractor={(results) => results.id}
        renderItem={({ item }) => {
          return (
            // Now you can use the navigation prop inside of your component
            <TouchableOpacity onPress={() => navigation.navigate('MyRoute')}>
              <ResultsDetail results={item} />
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

// withNavigation adds the navigation property to your ResultList component's properties
export default withNavigation(ResultList);

我认为你在 React Navigation 5 或 6 中找不到 withNavigation 的原因是因为他们建议你改用他们的内置钩子。我不确定你为什么需要使用定制的HoC，而你可以只使用useNavigation 钩子。如果您没有 specific reason 来使用您的自定义 HoC，则内置挂钩可以简化您的代码：

import { useNavigation } from '@react-navigation/native';

const ResultList = ({ title, results }) => {
  const navigation = useNavigation();

  return (
    <View style={styles.container}>
      <Text style={styles.title}>{title}</Text>
      <FlatList
        horizontal={true}
        showsHorizontalScrollIndicator={false}
        data={results}
        keyExtractor={(results) => results.id}
        renderItem={({ item }) => {
          return (
            // You can use the navigation property inside of your component
            <TouchableOpacity onPress={() => navigation.navigate('MyRoute')}>
              <ResultsDetail results={item} />
            </TouchableOpacity>
          );
        }}
      />
    </View>
  );
};

export default ResultList;