向导航栏传递屏幕定义函数触发「非可序列化」问题求解

方案1：使用React Context管理模态状态 #

通过Context统一管理模态框的显示状态与控制方法，导航栏组件直接从Context获取触发逻辑，彻底避免向navigation state传递非序列化的函数。

实现步骤： #

1. 创建模态状态管理Context：

import React, { createContext, useContext, useState } from 'react';

const ModalContext = createContext();

export const ModalProvider = ({ children }) => {
  const [isModalVisible, setIsModalVisible] = useState(false);

  const showModal = () => setIsModalVisible(true);
  const hideModal = () => setIsModalVisible(false);

  return (
    <ModalContext.Provider value={{ isModalVisible, showModal, hideModal }}>
      {children}
    </ModalContext.Provider>
  );
};

export const useModal = () => useContext(ModalContext);

2. 在导航容器外层包裹ModalProvider：

import { NavigationContainer } from '@react-navigation/native';
import { ModalProvider } from './ModalContext';

export default function App() {
  return (
    <ModalProvider>
      <NavigationContainer>
        {/* 你的导航栈定义 */}
      </NavigationContainer>
    </ModalProvider>
  );
}

3. 在ViewB组件中使用Context控制模态框：

import { useModal } from './ModalContext';
import { Modal, Text, View, Button } from 'react-native';

const ViewB = () => {
  const { isModalVisible, hideModal } = useModal();

  return (
    <View>
      {/* 屏幕主体内容 */}
      <Modal visible={isModalVisible} animationType="slide">
        <View>
          <Text>模态框内容</Text>
          <Button title="关闭" onPress={hideModal} />
        </View>
      </Modal>
    </View>
  );
};

4. 导航栏按钮直接调用Context的触发方法：

<Stack.Screen 
  name="ViewB" 
  component={ViewB} 
  options={() => ({
    headerRight: () => {
      const { showModal } = useModal();
      return <Button onPress={showModal} title="打开模态框" />;
    }
  })} 
/>

方案2：使用导航事件订阅 #

借助React Navigation的事件系统，在屏幕组件中订阅自定义事件，导航栏按钮触发该事件后，由屏幕组件响应并打开模态框，全程不向navigation state传入函数。

实现步骤： #

1. 在ViewB组件中订阅自定义事件：

import { useEffect, useState } from 'react';
import { Modal, Text, View, Button } from 'react-native';

const ViewB = ({ navigation }) => {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    // 订阅自定义事件
    const unsubscribe = navigation.addListener('triggerModal', () => {
      setShowModal(true);
    });

    // 组件卸载时取消订阅
    return unsubscribe;
  }, [navigation]);

  return (
    <View>
      {/* 屏幕主体内容 */}
      <Modal visible={showModal} animationType="slide">
        <View>
          <Text>模态框内容</Text>
          <Button title="关闭" onPress={() => setShowModal(false)} />
        </View>
      </Modal>
    </View>
  );
};

2. 导航栏按钮触发自定义事件：

<Stack.Screen 
  name="ViewB" 
  component={ViewB} 
  options={({ navigation }) => ({
    headerRight: () => (
      <Button 
        onPress={() => navigation.dispatch({ type: 'triggerModal' })} 
        title="打开模态框" 
      />
    )
  })} 
/>

方案3：将模态框设为独立导航屏幕 #

把模态框作为单独的屏幕加入导航栈，通过标准的导航跳转逻辑打开/关闭模态框，完全符合React Navigation的状态序列化要求。

实现步骤： #

1. 在导航栈中添加模态框屏幕：

import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppStack = () => {
  return (
    <Stack.Navigator>
      <Stack.Screen name="ViewB" component={ViewB} />
      <Stack.Screen 
        name="MyModal" 
        component={MyModal} 
        options={{ presentation: 'modal' }} 
      />
    </Stack.Navigator>
  );
};

2. 导航栏按钮通过跳转打开模态框：

<Stack.Screen 
  name="ViewB" 
  component={ViewB} 
  options={({ navigation }) => ({
    headerRight: () => (
      <Button onPress={() => navigation.navigate('MyModal')} title="打开模态框" />
    )
  })} 
/>

3. 实现模态框组件：

const MyModal = ({ navigation }) => {
  return (
    <View>
      <Text>模态框内容</Text>
      <Button title="关闭" onPress={() => navigation.goBack()} />
    </View>
  );
};

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