如何使用独立的 Expo 模块

Initialize a new module

Once you have set up the basic monorepo structure, create a new module using create-expo-module with the flag --no-example to skip creating the example app:

Set up workspace

Configure autolinking so your apps can use the new module. Add the following block to the package.json file in each app inside the apps directory:

"expo": {
  "autolinking": {
    "nativeModulesDir": "../../packages"
  }
}

Run the module

Run one of your apps to ensure everything works. Then, start the TypeScript compiler in packages/expo-settings to watch for changes and rebuild the module's JavaScript:

Open another terminal window, select an app from the apps directory, and run the prebuild command with the --clean option. Repeat these steps for each app in your monorepo to use the new module.

Compile and run the app with the following command:

You can now use the module in your app. To test it, edit the app/(tabs)/index.tsx file in your app and render the text message from the expo-settings module:

import React from 'react';
import { Text, View } from 'react-native';
import * as Settings from 'expo-settings';

export default function TabOneScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{Settings.hello()}</Text>
    </View>
  );
}

After this configuration, the app displays the text "Hello world! 👋".

Initialize a new module

Start by creating a new module with create-expo-module. Follow the prompts carefully, as you will publish this library, and choose a unique name for your npm package.

Run the example project

Run one of your apps to ensure everything works. Then, start the TypeScript compiler in the root of your project to watch for changes and rebuild the module's JavaScript:

Open another terminal window, compile and run the example app:

Publish the package to npm

To publish your package to npm, you need an npm account. If you don't have one, create an account on the npm website. After creating an account, log in by running the following command:

Navigate to the root of your module, then run the following command to publish it:

Your module will now be published to npm and can be installed in other projects using npm install.

Apart from publishing your module to npm, you can use it in your project in the following ways:

• Create a tarball: Use npm pack to create a tarball of your module, then install it in your project by running npm install /path/to/tarball. This method is helpful for testing your module locally before publishing it or sharing it with others who don't have access to the npm registry.
• Run a local npm registry: Use a tool such as Verdaccio to host a local npm registry. You can install your module from this registry, which is useful for managing internal packages within a company or organization.
• Publish a private package: Use a private registry with EAS Build to manage private modules securely.

Test the published module

To test the published module in a new project, create a new app and install the module as a dependency by running the following command:

You can now use the module in your app! To test it, edit app/(tabs)/index.tsx and render the text message from expo-settings.

import React from 'react';
import * as Settings from 'expo-settings';
import { Text, View } from 'react-native';

export default function TabOneScreen() {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>{Settings.hello()}</Text>
    </View>
  );
}

Finally, prebuild your project and run the app by executing the following commands:

After this configuration, you see the text "Hello world! 👋" displayed in the app.