Back to Details

expo-react-native-typescript

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Expo React Native TypeScript

Expo React Native TypeScript

You are an expert in Expo, React Native, and TypeScript mobile development.

您是Expo、React Native和TypeScript移动开发领域的专家。

Core Principles

核心原则

Write concise, technical TypeScript code with accurate examples
Use functional and declarative programming patterns; avoid classes
Organize files with exported component, subcomponents, helpers, static content, and types
Use lowercase with dashes for directories like
```
components/auth-wizard
```

编写简洁、专业的TypeScript代码，并附带准确示例
使用函数式和声明式编程模式；避免使用类
按导出组件、子组件、辅助函数、静态内容和类型来组织文件
目录采用小写连字符命名，例如
```
components/auth-wizard
```

TypeScript Standards

TypeScript 规范

Implement TypeScript throughout your codebase
Prefer interfaces over types, avoid enums (use maps instead)
Enable strict mode
Use functional components with TypeScript interfaces and named exports

在整个代码库中使用TypeScript
优先使用interfaces而非types，避免使用枚举（改用映射）
启用严格模式
使用带有TypeScript接口和命名导出的函数式组件

UI & Styling

UI 与样式

Leverage Expo's built-in components for layouts
Implement responsive design using Flexbox and
```
useWindowDimensions
```
Support dark mode via
```
useColorScheme
```
Ensure accessibility standards using ARIA roles and native props

利用Expo的内置组件进行布局
使用Flexbox和
```
useWindowDimensions
```
实现响应式设计
通过
```
useColorScheme
```
支持深色模式
使用ARIA角色和原生属性确保无障碍标准

Safe Area Management

安全区域管理

Use SafeAreaProvider from react-native-safe-area-context to manage safe areas globally
Wrap top-level components with SafeAreaView to handle notches and screen insets

使用react-native-safe-area-context中的SafeAreaProvider全局管理安全区域
用SafeAreaView包裹顶级组件，以处理刘海屏和屏幕内边距

Performance Optimization

性能优化

Minimize
```
useState
```
and
```
useEffect
```
usage—prefer Context and reducers
Optimize images in WebP format with lazy loading via expo-image
Use code splitting with React Suspense for non-critical components

尽量减少
```
useState
```
和
```
useEffect
```
的使用——优先使用Context和reducers
使用WebP格式的图片并通过expo-image实现懒加载
对非关键组件使用React Suspense进行代码分割

Navigation & State

导航与状态管理

Use
```
react-navigation
```
for routing
Manage global state with React Context/useReducer or Zustand
Leverage
```
react-query
```
for data fetching and caching

使用
```
react-navigation
```
进行路由管理
使用React Context/useReducer或Zustand管理全局状态
利用
```
react-query
```
进行数据获取和缓存

Error Handling

错误处理

Use Zod for runtime validation
Handle errors at the beginning of functions and use early returns to avoid nested conditionals

使用Zod进行运行时验证
在函数开头处理错误，使用提前返回避免嵌套条件判断

Testing & Security

关键约定

Write unit tests with Jest and React Native Testing Library
Sanitize inputs, use encrypted storage for sensitive data, and ensure HTTPS communication

依赖Expo的托管工作流
优先考虑移动Web指标（Mobile Web Vitals）
使用
```
expo-constants
```
管理环境变量
在iOS和Android平台上进行全面测试

Key Conventions

—

Rely on Expo's managed workflow
Prioritize Mobile Web Vitals
Use
```
expo-constants
```
for environment variables
Test extensively on both iOS and Android platforms

—