iT邦幫忙

2024 iThome 鐵人賽

DAY 30
0

先在 React Expo 專案裡按照下列路徑建立資料夾
mkdir -p modules/notification_progress

建立 / 更新位於自訂 Module 資料夾內的 package.json 檔案

// modules/notification_progress/package.json
{
  "name": "notification_progress",
  "version": "1.0.0",
  "description": "Notification Progress module for Expo",
  "main": "index.js",
  "expo": {
    "modules": ["expo.modules.notificationprogress.NotificationProgressModule"]
  }
}

package.json for NotificationProgress moduleClick to open text

Create modules/notification_progress/index.js:
javascriptCopyimport { NativeModulesProxy } from 'expo-modules-core';

export default NativeModulesProxy.NotificationProgressModule;

In your main package.json, update the dependency to use the new folder name:
jsonCopy"dependencies": {
// ... other dependencies ...
"notification_progress": "file:modules/notification_progress"
}

Update your Kotlin file locations:
Copymodules/notification_progress/android/src/main/java/expo/modules/notificationprogress/NotificationProgressModule.kt

If you have a build.gradle file, it should be at modules/notification_progress/android/build.gradle.
Update your app.json or app.config.js:
jsonCopy{
"expo": {
"plugins": [
["./modules/notification_progress/android/src/main/java/expo/modules/notificationprogress/NotificationProgressModule"]
]
}
}

When importing in your JavaScript code, use:
javascriptCopyimport NotificationProgressModule from 'notification_progress';

Remember to run yarn install or npm install after making these changes to update your project's dependencies.
Using underscores in folder and package names is completely valid. However, keep in mind a few conventions:

In JavaScript/Node.js, it's more common to use kebab-case for package names (e.g., notification-progress). But underscores work too.
In Kotlin/Java, package names typically use lowercase without underscores (e.g., notificationprogress). But this doesn't affect your folder structure.
Consistency is key. Whatever naming convention you choose, try to stick with it throughout your project.


上一篇
[Day 29] 解決 Module 的 function 無法使用問題
系列文
跨平台協同:在 React Native 和 Kotlin 應用中實現無縫交互 -以 Notification 為例30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言