Native Module与React Native Module的区别及CRNA兼容性疑问

Hey there! Let’s dive into your questions clearly—these are super common confusions when getting deeper into React Native, so I’m glad you asked.

1. What’s the Difference Between Native Module and React Native Module? #

Let’s break them down with real-world examples:

React Native Module #

These are the pre-built modules you use every day in React Native, either from the official framework or the community:

• Official examples: View, Text, AsyncStorage, Alert—these are all maintained by the React Native team and ready to use in your JS code without any native setup.
• Community examples: Libraries like react-native-vector-icons (when used with Expo or pre-linked) or react-navigation—most of these wrap existing native functionality or provide JS-only utilities that work across platforms.
• Core trait: They’re designed to be used directly in JS, with any native bridge work already handled for you. You don’t need to write Java/Kotlin or Obj-C/Swift to use them.

Native Module #

This is what you build when React Native doesn’t have a module for a specific platform API you need. For example:

• If you need to access Android’s NotificationManager in a way the official push notification modules don’t support, you’d write a custom Native Module in Kotlin/Java.
• Or if you want to integrate a proprietary iOS SDK that hasn’t been wrapped into a React Native library yet.
• Core trait: You write native code for the platform, then register it with React Native’s bridge so your JS code can call it. It’s a way to extend React Native with platform-specific functionality that’s not already available.

Quick Summary of Differences #

• Source: React Native Modules are pre-built (official/community); Native Modules are custom-built by you.
• Implementation: React Native Modules are ready-to-use in JS; Native Modules require writing native code + bridge setup.
• Use Case: React Native Modules cover common cross-platform needs; Native Modules solve unmet platform-specific API requirements.

2. react-native init vs CRNA (Create React Native App) & Why CRNA Can’t Link Native Modules #

First, let’s clarify what each tool does:

react-native init #

This is the official React Native project initializer. When you run react-native init MyApp, it generates:

• Full Android and iOS native project directories (you can open android/ in Android Studio or ios/ in Xcode).
• A JS project structure fully connected to the native code.
• You have full control to modify native code, link custom Native Modules (via react-native link or manual configuration), and integrate any native SDKs you need.
• Best for projects that require deep native customization.

CRNA (Create React Native App) #

CRNA is a tool built by Expo to simplify React Native development. When you initialize a project with CRNA:

• You don’t get the native project directories (no android/ or ios/ folders by default).
• Your app runs inside Expo’s pre-built native container, which gives you access to Expo’s SDK (a set of pre-built native modules like camera, location, etc.).
• The big benefit is you don’t need to set up Android Studio/Xcode or deal with native build configurations—you can start coding JS right away.

Why CRNA Can’t Link Native Modules #

The key reason is Expo’s container model:

• CRNA apps run in a pre-compiled native container maintained by Expo. This container doesn’t support adding custom native code or linking external Native Modules, because it would require modifying the container’s native code (which you don’t have access to by default).
• If you need to use a custom Native Module, you can run expo eject on your CRNA project. This converts it into a full react-native init-style project, with the native directories exposed. Once ejected, you can link Native Modules just like any other React Native project—but you’ll lose some Expo perks like over-the-air (OTA) updates and seamless SDK upgrades.

Quick Summary of Differences #

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