React Native 0.74 + TypeScript：组件复用与原生模块调用指南

一、组件复用策略（TypeScript实现）

核心原则：通过泛型接口定义可复用组件契约

interface ReusableComponentProps<T> {
  data: T[];
  renderItem: (item: T) => React.ReactNode;
}

const GenericList = <T,>({ data, renderItem }: ReusableComponentProps<T>) => (
  <FlatList
    data={data}
    keyExtractor={(item, index) => `${index}-${JSON.stringify(item)}`}
    renderItem={({ item }) => renderItem(item)}
  />
);

// 使用示例
<GenericList 
  data={users} 
  renderItem={(user) => <Text>{user.name}</Text>} 
/>

最佳实践：

1. 使用tsconfig.json路径别名简化导入

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@components/*": ["components/*"]
    }
  }
}

1. 通过高阶组件注入通用逻辑（如网络请求状态）
2. 使用React.memo优化渲染性能

---

二、原生模块调用（相机/定位）

相机模块实现：

1. 安装依赖：yarn add react-native-vision-camera
2. 类型化相机组件：

import { Camera, useCameraDevice } from 'react-native-vision-camera';

const CameraView = () => {
  const device = useCameraDevice('back');
  
  if (!device) return <Text>Camera not available</Text>;
  return <Camera device={device} isActive={true} />;
};

定位模块实现：

1. 安装依赖：yarn add react-native-geolocation-service
2. 封装定位服务：

import Geolocation from 'react-native-geolocation-service';

type Position = {
  coords: {
    latitude: number;
    longitude: number;
    accuracy: number;
  };
};

const getLocation = (): Promise<Position> => {
  return new Promise((resolve, reject) => {
    Geolocation.getCurrentPosition(
      resolve,
      reject,
      { enableHighAccuracy: true, timeout: 15000 }
    );
  });
};

---

三、项目架构优化建议

src/
├── components/      # 复用组件库
│   ├── camera/
│   ├── maps/
│   └── ui/
├── native-modules/  # 原生模块桥接层
├── hooks/           # 自定义Hook
├── types/           # 全局类型定义
└── utils/           # 工具函数

关键优化点：

1. 使用react-native-builder-bob构建跨平台模块
2. 通过TurboModule实现类型安全的原生通信（RN 0.74+）
3. 在metro.config.js中配置模块加速：

module.exports = {
  resolver: {
    unstable_enablePackageExports: true,
  },
};

---

四、开源项目实践方案

1. 组件发布：

   • 使用bit.dev管理可复用组件
   • 配置tsup构建类型声明文件

   tsup src/index.tsx --dts --format esm,cjs
   

2. 原生模块封装：

   • 创建NativeModule类型定义文件

   declare module 'react-native-native-module' {
    export function openCamera(options: { quality: number }): Promise<string>;
   }
   

3. CI/CD流程：

   # GitHub Actions 示例
   - name: Type Check
     run: yarn tsc --noEmit
   - name: Build Android
     run: yarn android:build
   

调试建议：使用react-native-debugger配合Redux DevTools进行类型化状态管理检查，重点关注原生模块的TypeScript接口契约一致性。