React Native Native-Base自定义按钮onPress导航报navigate未定义

使用React Native + Native-Base开发安卓应用时，将按钮抽离为独立公共组件后，组件内配置的onPress跳转逻辑失效，运行抛出错误：navigate is not defined。
相同跳转写法直接写在应用已注册的页面组件中可正常运行，抽离为公共组件后失效。

原问题实现代码：

import React from "react";
import { StyleSheet, View, TouchableOpacity } from "react-native";
import { NativeBaseProvider, Button, Text } from "native-base";

const ButtonAPP = (props) => {
  //const linkBottom = props.linkBottom;
  const textBottom = props.textBottom;

  return (
    <NativeBaseProvider>
      <View style={styles.viewButtonAPP}>
        <Button
          shadow={2}
          style={styles.buttonAPP}
          onPress={() => props.navigation.navigate("Home")}
        >
          <Text style={styles.textButton}>{textBottom}</Text>
        </Button>
      </View>
    </NativeBaseProvider>
  );
};
const styles = StyleSheet.create({
  styles....
});
export default ButtonAPP;

• 只有被React Navigation注册到导航栈的页面级组件，才会自动被注入带navigate方法的navigation prop
• 抽离的ButtonAPP是公共通用组件，不属于导航栈内的注册页面，默认props中不存在navigation对象，直接调用自然报未定义错误
• 代码存在额外冗余问题：NativeBaseProvider仅需要在应用根节点包裹一次，公共组件内重复嵌套该容器可能引发样式、上下文异常。

二选一即可，优先推荐第一种：

方案1：使用useNavigation钩子获取导航对象（推荐） #

React Navigation官方提供useNavigation钩子，支持所有非页面级组件直接获取导航实例，修改后代码如下：

import React from "react";
import { StyleSheet, View } from "react-native";
// 导入useNavigation钩子
import { useNavigation } from "@react-navigation/native";
import { Button, Text } from "native-base";

const ButtonAPP = (props) => {
  const textBottom = props.textBottom;
  // 调用钩子拿到navigation实例
  const navigation = useNavigation();

  return (
    // 删除多余的NativeBaseProvider嵌套
    <View style={styles.viewButtonAPP}>
      <Button
        shadow={2}
        style={styles.buttonAPP}
        onPress={() => navigation.navigate("Home")}
      >
        <Text style={styles.textButton}>{textBottom}</Text>
      </Button>
    </View>
  );
};
const styles = StyleSheet.create({
  // 原有样式保持不变
});
export default ButtonAPP;

方案2：父组件透传navigation属性 #

在使用ButtonAPP的页面级组件中，将页面自带的navigation作为prop传入公共组件即可，不需要修改公共组件内部逻辑：

// 导航栈注册的页面组件中使用按钮时
<ButtonAPP 
  textBottom="跳转首页"
  navigation={navigation}
/>

该方案缺点是组件嵌套层级较深时，需要逐层传递props，维护成本更高。

内容的提问来源于stack exchange，提问作者Cimo