React Native中如何将Download页计数传递给Dashboard并监听下载更新

方案1：使用React Native自带的DeviceEventEmitter实现（轻量无额外依赖） #

适合中小项目，无需修改现有导航结构，实现成本最低：

• 第一步：在下载列表所在的DownloadScreen页面，监听下载列表变化，发送更新事件

// DownloadScreen.js
import { DeviceEventEmitter } from 'react-native'

// 假设用downloadList存储所有下载任务
const [downloadList, setDownloadList] = useState([])

// 列表变化时发送事件，传递正在下载的任务数量
useEffect(() => {
  const downloadingCount = downloadList.filter(item => item.status === 'downloading').length
  DeviceEventEmitter.emit('updateDownloadBadge', downloadingCount)
}, [downloadList])

• 第二步：在MyTabs组件中监听事件，更新徽章数值

function MyTabs() {
  const [badge, setBadge] = useState(0)
  
  useEffect(() => {
    // 注册事件监听
    const listener = DeviceEventEmitter.addListener('updateDownloadBadge', (count) => {
      setBadge(count)
    })
    // 组件卸载时移除监听避免内存泄漏
    return () => listener.remove()
  }, [])

  return (
    <Tab.Navigator>
      {/* 其余Tab代码保持不变 */}
      <Tab.Screen
        name="Download"
        component={MyDownloadScreen}
        options={{
          tabBarBadge: badge != 0 ? badge : null,
        }}
      />
    </Tab.Navigator>
  )
}

方案2：使用React Context实现（适合多页面需要共享下载状态的项目） #

如果下载状态需要在多个页面使用，优先用Context做全局状态管理：

• 第一步：创建全局下载状态管理文件

// DownloadContext.js
import { createContext, useContext, useState } from 'react'

const DownloadContext = createContext()

export function DownloadProvider({ children }) {
  const [downloadingCount, setDownloadingCount] = useState(0)
  return (
    <DownloadContext.Provider value={{ downloadingCount, setDownloadingCount }}>
      {children}
    </DownloadContext.Provider>
  )
}

export function useDownload() {
  return useContext(DownloadContext)
}

• 第二步：在Dashboard.js最外层包裹Provider

import { DownloadProvider } from './DownloadContext'

export default function Dashboard() {
  return (
    <DownloadProvider>
      <NavigationContainer>
        {/* 原有导航代码保持不变 */}
      </NavigationContainer>
    </DownloadProvider>
  )
}

• 第三步：在MyTabs中直接取徽章数值

function MyTabs() {
  const { downloadingCount } = useDownload()
  return (
    <Tab.Navigator>
      {/* 其余Tab代码保持不变 */}
      <Tab.Screen
        name="Download"
        component={MyDownloadScreen}
        options={{
          tabBarBadge: downloadingCount != 0 ? downloadingCount : null,
        }}
      />
    </Tab.Navigator>
  )
}

• 第四步：在DownloadScreen中更新全局计数

const { setDownloadingCount } = useDownload()
const [downloadList, setDownloadList] = useState([])

useEffect(() => {
  const count = downloadList.filter(item => item.status === 'downloading').length
  setDownloadingCount(count)
}, [downloadList, setDownloadingCount])

如果项目已经接入Redux、Zustand等全局状态管理库，直接把下载计数存入全局store即可，逻辑和Context方案一致。

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