React Native

作者 alinaqi72a456e6ccf0无许可证707 个星标收录于 2026年10月8日更新于 2026年10月8日仓库2周前更新

React Native mobile patterns, platform-specific code

仅含说明Software Development

AI 生成的概览

React Native 编码规范，涵盖项目结构、组件、状态管理、测试与平台特定代码。

功能: 提供 React Native 开发指导：推荐的项目目录结构、函数式组件与 Hook 模式、显式的 props 接口，以及本地状态、Zustand、React Query 等状态管理选择。还涵盖使用 React Native Testing Library 进行组件与 Hook 测试、通过 Platform.select 或独立文件处理平台差异，并列出应避免的反模式。
适用场景: 适用于编写或审查 React Native 移动应用代码时，尤其是在确定项目结构、组件与 Hook 模式、状态管理、测试方式或 iOS/Android 差异处理时。
运行要求: 不附带任何脚本或工具，仅为说明性指导。内容假定项目使用 TypeScript 的 React Native 项目，并提及 Zustand、React Query 和 React Native Testing Library 等库。

React Native Skill

Project Structure

project/├── src/│   ├── core/                   # Pure business logic (no React)│   │   ├── types.ts│   │   └── services/│   ├── components/             # Reusable UI components│   │   ├── Button/│   │   │   ├── Button.tsx│   │   │   ├── Button.test.tsx│   │   │   └── index.ts│   │   └── index.ts            # Barrel export│   ├── screens/                # Screen components│   │   ├── Home/│   │   │   ├── HomeScreen.tsx│   │   │   ├── useHome.ts      # Screen-specific hook│   │   │   └── index.ts│   │   └── index.ts│   ├── navigation/             # Navigation configuration│   ├── hooks/                  # Shared custom hooks│   ├── store/                  # State management│   └── utils/                  # Utilities├── __tests__/├── android/├── ios/└── CLAUDE.md

project/├── src/│   ├── core/                   # Pure business logic (no React)│   │   ├── types.ts│   │   └── services/│   ├── components/             # Reusable UI components│   │   ├── Button/│   │   │   ├── Button.tsx│   │   │   ├── Button.test.tsx│   │   │   └── index.ts│   │   └── index.ts            # Barrel export│   ├── screens/                # Screen components│   │   ├── Home/│   │   │   ├── HomeScreen.tsx│   │   │   ├── useHome.ts      # Screen-specific hook│   │   │   └── index.ts│   │   └── index.ts│   ├── navigation/             # Navigation configuration│   ├── hooks/                  # Shared custom hooks│   ├── store/                  # State management│   └── utils/                  # Utilities├── __tests__/├── android/├── ios/└── CLAUDE.md

Component Patterns

Functional Components Only

typescript

// Good - simple, testableinterface ButtonProps {  label: string;  onPress: () => void;  disabled?: boolean;}
export function Button({ label, onPress, disabled = false }: ButtonProps): JSX.Element {  return (    <Pressable onPress={onPress} disabled={disabled}>      <Text>{label}</Text>    </Pressable>  );}

// Good - simple, testableinterface ButtonProps {  label: string;  onPress: () => void;  disabled?: boolean;}
export function Button({ label, onPress, disabled = false }: ButtonProps): JSX.Element {  return (    <Pressable onPress={onPress} disabled={disabled}>      <Text>{label}</Text>    </Pressable>  );}

Extract Logic to Hooks

typescript

// useHome.ts - all logic hereexport function useHome() {  const [items, setItems] = useState<Item[]>([]);  const [loading, setLoading] = useState(false);
  const refresh = useCallback(async () => {    setLoading(true);    const data = await fetchItems();    setItems(data);    setLoading(false);  }, []);
  return { items, loading, refresh };}
// HomeScreen.tsx - pure presentationexport function HomeScreen(): JSX.Element {  const { items, loading, refresh } = useHome();    return (    <ItemList items={items} loading={loading} onRefresh={refresh} />  );}

// useHome.ts - all logic hereexport function useHome() {  const [items, setItems] = useState<Item[]>([]);  const [loading, setLoading] = useState(false);
  const refresh = useCallback(async () => {    setLoading(true);    const data = await fetchItems();    setItems(data);    setLoading(false);  }, []);
  return { items, loading, refresh };}
// HomeScreen.tsx - pure presentationexport function HomeScreen(): JSX.Element {  const { items, loading, refresh } = useHome();    return (    <ItemList items={items} loading={loading} onRefresh={refresh} />  );}

Props Interface Always Explicit

typescript

// Always define props interface, even if simpleinterface ItemCardProps {  item: Item;  onPress: (id: string) => void;}
export function ItemCard({ item, onPress }: ItemCardProps): JSX.Element {  ...}

// Always define props interface, even if simpleinterface ItemCardProps {  item: Item;  onPress: (id: string) => void;}
export function ItemCard({ item, onPress }: ItemCardProps): JSX.Element {  ...}

State Management

Local State First

Zustand for Global State (if needed)

typescript

// store/useAppStore.tsimport { create } from 'zustand';
interface AppState {  user: User | null;  setUser: (user: User | null) => void;}
export const useAppStore = create<AppState>((set) => ({  user: null,  setUser: (user) => set({ user }),}));

// store/useAppStore.tsimport { create } from 'zustand';
interface AppState {  user: User | null;  setUser: (user: User | null) => void;}
export const useAppStore = create<AppState>((set) => ({  user: null,  setUser: (user) => set({ user }),}));

React Query for Server State

typescript

// hooks/useItems.tsimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
export function useItems() {  return useQuery({    queryKey: ['items'],    queryFn: fetchItems,  });}
export function useCreateItem() {  const queryClient = useQueryClient();    return useMutation({    mutationFn: createItem,    onSuccess: () => {      queryClient.invalidateQueries({ queryKey: ['items'] });    },  });}

// hooks/useItems.tsimport { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
export function useItems() {  return useQuery({    queryKey: ['items'],    queryFn: fetchItems,  });}
export function useCreateItem() {  const queryClient = useQueryClient();    return useMutation({    mutationFn: createItem,    onSuccess: () => {      queryClient.invalidateQueries({ queryKey: ['items'] });    },  });}

Testing

Component Testing with React Native Testing Library

typescript

import { render, fireEvent } from '@testing-library/react-native';import { Button } from './Button';
describe('Button', () => {  it('calls onPress when pressed', () => {    const onPress = jest.fn();    const { getByText } = render(<Button label="Click me" onPress={onPress} />);        fireEvent.press(getByText('Click me'));        expect(onPress).toHaveBeenCalledTimes(1);  });
  it('does not call onPress when disabled', () => {    const onPress = jest.fn();    const { getByText } = render(<Button label="Click me" onPress={onPress} disabled />);        fireEvent.press(getByText('Click me'));        expect(onPress).not.toHaveBeenCalled();  });});

import { render, fireEvent } from '@testing-library/react-native';import { Button } from './Button';
describe('Button', () => {  it('calls onPress when pressed', () => {    const onPress = jest.fn();    const { getByText } = render(<Button label="Click me" onPress={onPress} />);        fireEvent.press(getByText('Click me'));        expect(onPress).toHaveBeenCalledTimes(1);  });
  it('does not call onPress when disabled', () => {    const onPress = jest.fn();    const { getByText } = render(<Button label="Click me" onPress={onPress} disabled />);        fireEvent.press(getByText('Click me'));        expect(onPress).not.toHaveBeenCalled();  });});

Hook Testing

typescript

import { renderHook, act } from '@testing-library/react-hooks';import { useCounter } from './useCounter';
describe('useCounter', () => {  it('increments counter', () => {    const { result } = renderHook(() => useCounter());        act(() => {      result.current.increment();    });        expect(result.current.count).toBe(1);  });});

import { renderHook, act } from '@testing-library/react-hooks';import { useCounter } from './useCounter';
describe('useCounter', () => {  it('increments counter', () => {    const { result } = renderHook(() => useCounter());        act(() => {      result.current.increment();    });        expect(result.current.count).toBe(1);  });});

Platform-Specific Code

Use Platform.select Sparingly

typescript

import { Platform } from 'react-native';
const styles = StyleSheet.create({  shadow: Platform.select({    ios: {      shadowColor: '#000',      shadowOffset: { width: 0, height: 2 },      shadowOpacity: 0.1,    },    android: {      elevation: 2,    },  }),});

import { Platform } from 'react-native';
const styles = StyleSheet.create({  shadow: Platform.select({    ios: {      shadowColor: '#000',      shadowOffset: { width: 0, height: 2 },      shadowOpacity: 0.1,    },    android: {      elevation: 2,    },  }),});

Separate Files for Complex Differences

Component/├── Component.tsx          # Shared logic├── Component.ios.tsx      # iOS-specific├── Component.android.tsx  # Android-specific└── index.ts

Component/├── Component.tsx          # Shared logic├── Component.ios.tsx      # iOS-specific├── Component.android.tsx  # Android-specific└── index.ts

React Native Anti-Patterns

❌ Inline styles - use StyleSheet.create
❌ Logic in render - extract to hooks
❌ Deep component nesting - flatten hierarchy
❌ Anonymous functions in props - use useCallback
❌ Index as key in lists - use stable IDs
❌ Direct state mutation - always use setter
❌ Mixing business logic with UI - keep core/ pure
❌ Ignoring TypeScript errors - fix them
❌ Large components - split into smaller pieces

来源与署名

来源：alinaqi/maggy位于skills/react-native提交72a456e

许可证：无许可证

内容归原作者所有。SourceWeft 从公开仓库中收录这些内容。

举报或申请下架

React Native

React Native Skill

Project Structure

Component Patterns

Functional Components Only

Extract Logic to Hooks

Props Interface Always Explicit

State Management

Local State First

Zustand for Global State (if needed)

React Query for Server State

Testing

Component Testing with React Native Testing Library

Hook Testing

Platform-Specific Code

Use Platform.select Sparingly

Separate Files for Complex Differences

React Native Anti-Patterns

来源与署名

更多来自 alinaqi/maggy 的技能

User Journeys

Ui Mobile

Flutter

Code Deduplication

Android Java

Android Kotlin

更多Software Development技能

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices