如何创建并发布React Native组件至NPM？步骤与结构等疑问

Hey there! Let me walk you through the entire process of building a React Native component and publishing it to NPM, since you already have a GitHub repo set up. I'll break this down into clear, actionable steps so you don't miss anything important.

First, let's get the project structure right—this keeps your code organized and ensures NPM publishes only what's necessary. Here's a standard setup:

your-react-native-component/
├── src/
│   ├── index.js       # Your core component code (exports the component)
│   └── styles.js      # Optional: Component-specific styles
├── example/
│   ├── App.js         # Test app to preview and debug your component locally
│   └── package.json   # Dependencies for the test app
├── package.json       # Critical config for NPM publishing
├── README.md          # Documentation (make this thorough!)
├── .gitignore         # Ignore files like node_modules, .expo, etc.
└── LICENSE            # Open-source license (e.g., MIT)

• The src/ folder holds your actual component code—this is what users will import when they install your package.
• The example/ folder is a mini React Native app for local testing, so you don't have to publish to NPM just to check if your component works.

Step 2.1: Initialize the Project #

In your root folder, run:

npm init

Fill in the prompts (package name, version, description, etc.—you can tweak these later in package.json).

Step 2.2: Write Your Component #

Add your component code to src/index.js. For example, a simple custom button:

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

const CustomButton = ({ title, onPress, backgroundColor = '#2196F3' }) => {
  return (
    <TouchableOpacity 
      style={[styles.buttonContainer, { backgroundColor }]} 
      onPress={onPress}
    >
      <Text style={styles.buttonText}>{title}</Text>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  buttonContainer: {
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 8,
    alignItems: 'center',
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: '600',
  },
});

export default CustomButton;

Step 2.3: Test Locally #

In the example/ folder, initialize a React Native app (using Expo or React Native CLI), then import your component directly from the src/ folder:

// example/App.js
import CustomButton from '../src';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <CustomButton 
        title="Press Me!" 
        onPress={() => alert('Button clicked!')}
      />
    </View>
  );
}

Run the example app to make sure your component works as expected.

This file tells NPM everything it needs to know about your package. Here are the key fields to update:

{
  "name": "@your-npm-username/custom-button", // Use a scoped name to avoid conflicts
  "version": "1.0.0", // Follow semantic versioning (major.minor.patch)
  "main": "src/index.js", // Entry point for users importing your component
  "files": ["src/", "README.md", "LICENSE"], // Only publish these files
  "keywords": ["react-native", "button", "ui-component"], // Help users find your package
  "author": "Your Name",
  "license": "MIT",
  "peerDependencies": {
    "react": "^18.0.0",
    "react-native": "^0.70.0"
  }
}

• Scoped packages: Using @your-username/ ensures your package name is unique (no more fighting over "react-native-button"!). Publish it publicly with npm publish --access public.
• Peer dependencies: These tell NPM that your component relies on the user's existing React/React Native versions—prevents duplicate installs and version conflicts.

Before hitting publish:

1. Polish your README: Include installation instructions (npm install @your-username/custom-button), usage examples, prop definitions, and any customization options. This is how users will learn to use your component!
2. Commit code to GitHub: Push all your changes to your repo so your NPM package matches the source code.
3. Clean up: Make sure .gitignore excludes node_modules, example/node_modules, and any other unnecessary files (like .expo or build artifacts).

Step 5.1: Log in to NPM #

If you don't have an NPM account, sign up on the NPM website first. Then run:

npm login

Enter your username, password, and email when prompted.

Step 5.2: Publish #

In your root folder, run:

# For scoped packages (public)
npm publish --access public

# For non-scoped packages
npm publish

That's it! Your component will now be live on NPM, and anyone can install it with the command you added to your README.

• Updates: When you fix bugs or add features, bump the version in package.json (e.g., 1.0.1 for patches, 1.1.0 for minor features), commit to GitHub, and run npm publish again.
• Optional tools: Tools like np can simplify the process—they handle version bumping, changelog generation, and publishing to both NPM and GitHub in one command.

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