求推荐React Native纯JavaScript组件库的创建工具或技术文章

嘿，我完全懂你想要搭建纯JavaScript React Native组件库的需求——react-native-create-library确实自带了太多原生模块相关的模板文件，对于纯JS组件来说实在太冗余了。下面分享几个实用的方案和思路，帮你搭建最精简的库结构：

方案1：手动搭建（最灵活，完全可控） #

纯JS RN库的核心结构其实非常简单，完全可以手动创建，步骤超清晰：

• 新建项目文件夹，比如my-rn-js-component
• 初始化package.json：运行 npm init -y 或者 yarn init -y
• 把react和react-native设为peer依赖（因为使用你库的项目会自带这些依赖，避免重复安装）：

  npm install react react-native --save-peer
  

• 在src文件夹下创建你的组件文件，比如src/MyAwesomeComponent.js，写你的纯JS/JSX组件逻辑
• 在package.json里配置入口路径："main": "src/MyAwesomeComponent.js"（如果后续打包的话，可以改成打包后的文件路径）
• 可选：如果需要把代码打包成单文件或处理ES模块兼容，可以用metro或者rollup，配置简单的打包脚本即可

方案2：用轻量脚手架工具（快速生成） #

有几个脚手架专门针对纯JS组件，完全不带原生模块的冗余内容：

• create-react-library：虽然名字带React，但它完美支持React Native组件。创建时可以选择不包含原生代码，生成的结构极度精简，只有JS相关的配置和基础模板。运行命令：

  npx create-react-library my-rn-component
  

  跟着提示选择React Native相关选项（或手动调整配置去掉原生部分）即可。
• tsdx：如果你需要TypeScript支持，这个工具非常好用。它默认生成TypeScript结构，也可以轻松转成JS，自带打包、测试、lint等工具，完全没有原生模块的多余文件。运行命令初始化：

  npx tsdx create my-rn-ts-component
  

  然后选择react-native模板即可。

方案3：参考成熟纯JS RN库的结构 #

可以看看知名纯JS RN组件库的目录结构，比如react-native-elements的核心代码部分，直接模仿它们的配置和组织方式：

• 核心代码放在src文件夹下，按组件拆分文件
• package.json里正确配置peerDependencies、main（CommonJS入口）、module（ES模块入口）
• 可选添加example文件夹（放一个测试用的RN项目，方便演示组件）、test文件夹（用jest+react-native-test-renderer做JS层面的测试）

额外小提示 #

• 永远把react和react-native放在peerDependencies里，不要作为直接依赖，避免用户项目出现依赖冲突
• 如果要支持TypeScript，只需要添加tsconfig.json，把组件写成.tsx文件，不需要任何原生配置
• 测试完全可以在JS层面完成，用jest和react-native-test-renderer就能覆盖大部分场景

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