React Navigation如何通过顶部导航栏右侧按钮调用ChatScreen内的函数

你可以通过React Navigation提供的 navigation.setOptions API 在ChatScreen组件内部动态配置导航栏按钮，即可直接调用组件内定义的函数，具体实现如下：

1. 调整导航栈配置 #

移除Chat Screen静态options中的headerRight配置，仅保留通用的标题配置：

const MessageStack = createStackNavigator();
const MessageNavigator = () => (
<MessageStack.Navigator>
    <MessageStack.Screen name="Messages" component={MessagesScreen} />
    <MessageStack.Screen 
        name="Chat" 
        component={ChatScreen} 
        options={({ route }) => ({
            title: route.params.thread.username
        })} 
    />
</MessageStack.Navigator>
)

2. 修改ChatScreen组件 #

在组件内部动态设置headerRight并绑定点击事件：

import { useState, useLayoutEffect } from 'react';
import { Alert, Text } from 'react-native';

// 组件参数新增navigation prop
function ChatScreen({ route, navigation }) {
  const { thread } = route.params
  const [messages, setMessages] = useState([]);

  const createTwoButtonAlert = () =>
  Alert.alert(
    "Alert Title",
    "My Alert Msg",
    [
      {
        text: "Cancel",
        onPress: () => console.log("Cancel Pressed"),
        style: "cancel"
      },
      { text: "OK", onPress: () => console.log("OK Pressed") }
    ]
  );

  // 组件挂载后动态设置导航栏右侧按钮
  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <Text style={{paddingEnd:10}} onPress={createTwoButtonAlert}>View Profile</Text>
      )
    })
  }, [navigation, createTwoButtonAlert])

  // 剩余组件逻辑...
}

实现原理 #

静态定义在Stack.Screen上的options无法访问组件内部的作用域，而setOptions方法允许我们在组件内部动态修改导航配置，此时可以直接访问组件内定义的所有方法和状态，即可实现按钮点击调用内部函数的需求。

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