如何在 React Native 6 中调用我们自己的 Build withNavigation

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;

如何在 React Native 6 中调用我们自己的 Build withNavigation

How To Call Our Own Build withNavigation In React Native 6

react-native

react-native-navigation