如何在React Native中开发自定义SDK并跨项目使用？求实现步骤

一、初始化SDK项目 #

• 用react-native init创建基础RN项目，比如命名为rn-custom-sdk
• 清理冗余文件：删掉App.js里的默认示例代码、__tests__目录，若SDK仅含JS逻辑，可简化ios/和android/里的默认示例代码；若需原生模块则保留原生目录
• 调整项目结构：把SDK核心代码放在src/目录下，比如src/components/存自定义组件、src/utils/存工具函数，src/index.js作为对外入口

二、开发SDK核心功能 #

纯JS SDK开发示例 #

直接在src/下编写组件或工具函数，比如封装自定义按钮：

// src/components/CustomButton.js
import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomButton = ({ title, onPress }) => {
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={styles.text}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  button: { padding: 12, backgroundColor: '#2196F3', borderRadius: 8 },
  text: { color: 'white', fontSize: 16, textAlign: 'center' },
});

export default CustomButton;

含原生模块的SDK开发 #

如果需要调用原生能力（比如自定义Toast）：

• iOS：在ios/目录下创建RNCustomToast.m和RNCustomToast.h，实现RCTBridgeModule协议
• Android：在android/目录下创建RNCustomToastModule.java，继承ReactContextBaseJavaModule并注册模块
• JS层创建src/utils/Toast.js，导出原生模块的调用方法

三、配置SDK的package.json #

修改package.json关键字段，确保可被其他项目识别：

{
  "name": "rn-custom-sdk",
  "version": "1.0.0",
  "main": "src/index.js", // 指定SDK入口文件
  "peerDependencies": {
    "react": "*",
    "react-native": "*"
  },
  "scripts": {
    "test": "jest"
  }
}

在src/index.js统一导出对外暴露的内容：

import CustomButton from './components/CustomButton';
import Toast from './utils/Toast';

export { CustomButton, Toast };

四、本地测试SDK（推荐） #

• 在SDK项目根目录运行npm link，把SDK链接到全局
• 打开测试用RN项目，运行npm link rn-custom-sdk
• 在测试项目中引入SDK组件测试：

import { CustomButton } from 'rn-custom-sdk';

// 组件内使用
<CustomButton title="测试SDK按钮" onPress={() => alert('SDK按钮触发')} />

五、发布SDK（可选，本地集成可跳过） #

• 若要发布到npm，先注册npm账号，然后在SDK根目录运行：

npm login
npm publish

• 仅本地使用的话，直接通过本地路径引用即可

六、集成到目标RN项目 #

方式1：本地路径引用 #

在目标项目的package.json中添加依赖：

"dependencies": {
  "rn-custom-sdk": "file:../rn-custom-sdk" // 替换为SDK项目的实际相对路径
}

运行npm install或yarn install完成安装

方式2：npm包引用 #

直接执行安装命令：

npm install rn-custom-sdk
# 或 yarn add rn-custom-sdk

方式3：Git仓库引用 #

如果SDK托管在Git仓库，通过Git地址安装：

npm install git+https://github.com/你的用户名/rn-custom-sdk.git

七、原生模块额外配置（若SDK包含原生代码） #

• iOS：进入目标项目的ios/目录，运行pod install
• Android：RN 0.60+版本会自动链接原生模块；低于0.60版本需手动运行react-native link rn-custom-sdk

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