V2Fun NotFoundScreen 组件解析

本文介绍 V2Fun 项目中 NotFoundScreen.tsx 文件的实现，这是一个基于 React Native 和 Expo 开发的 V2EX 第三方客户端的 404 页面组件。

项目简介

V2Fun 是一个美观的 V2EX 第三方客户端，采用原生 App 开发，支持夜间模式。该项目使用 React Native + Expo 技术栈构建，目前在 GitHub 上已获得 748 stars。

NotFoundScreen 组件分析

NotFoundScreen 是一个简单的 404 错误页面组件，用于在页面未找到时显示空状态。

代码实现

import { useAtomValue } from 'jotai'
import { View } from 'react-native'
import Empty from '@/components/Empty'
import { colorSchemeAtom } from '@/jotai/themeAtom'
import tw from '@/utils/tw'

export default function NotFoundScreen() {
  const colorScheme = useAtomValue(colorSchemeAtom)

  return (
    <View key={colorScheme} style={tw`flex-1 justify-center items-center`}>
      <Empty />
    </View>
  )
}

技术要点

1. 状态管理

• 使用 jotai 的 useAtomValue hook 读取主题状态
• colorSchemeAtom 来自主题原子状态，用于监听深色/浅色模式切换

2. 样式处理

• 使用 tw 工具函数（基于 Tailwind CSS 的 React Native 实现）
• flex-1：占据剩余空间
• justify-center：垂直居中
• items-center：水平居中

3. 主题适配

• key={colorScheme}：当主题切换时强制重新渲染组件
• 确保空状态组件能正确响应主题变化

4. 组件复用

• 使用项目中通用的 Empty 组件显示空状态
• 保持 UI 一致性，避免重复实现

项目技术栈

项目链接

• GitHub 仓库：https://github.com/liaoliao666/v2ex
• iOS 下载：https://apps.apple.com/cn/app/v2fun/id1659591551
• Android 下载：https://github.com/liaoliao666/v2ex/releases/latest

许可证

MIT License