分享 React-Native 組件

Question

我是 react、react-native 和 nodejs 的新手。

我嘗試通過npm init創建節點模塊。 在這個模塊中，我創建了一個組件 - 用於啟動樣式按鈕。 我通過依賴部分中的“ file:../shared/_dist/shared-1.0.0.tgz ”通過npm pack a link in package.json文件將其打包。

在我共享的 index.js 中是

import MyButtonFirst from './components/buttons/MyButtonFirst';
module.exports = { MyButtonFirst  };

在反應應用程序中是

import React from 'react;
import { MyButtonFirst } from 'shared';

export default function MySharedButton()
{
   return <MyButtonFirst />;
}

有用！

然后我嘗試創建使用react-native-async-storage/async-storage 的組件（通過共享項目中的 npm install ）。 增加版本、npm 包、鏈接並安裝新版本的包后，我得到錯誤，Android 運行后AsyncStorage 為空。

為什么 AsyncStorage 為空？ 我是否在兩個項目中都創建了依賴關系？ （這是一個奇怪的解決方案 - 我覺得它不合適，雖然它有效）如何共享例如圖標、圖像等資源。

我們需要為不同類型的用戶（運動員、裁判、運動場管理員）開發三個基於體育領域相同數據（API）的應用程序以及我們需要共享的大量代碼——圖標、上下文（用戶、主題等...）、錯誤處理、API 調用等...我們不希望將其開發為一個大型的權限控制應用程序，而是開發為針對各個角色的幾個小應用程序。

如何在更多本機應用程序之間共享代碼的最佳方式是什么？

Answer 1

AsyncStorage已棄用，請參見此處。

您可以根據數據庫的反饋（用戶的角色）創建一個鏈接到不同應用程序的 start.js。 否則，它將路由到帶有例如登錄和注冊子組件的歡迎組件。

import ReactDOM from "react-dom";
import Welcome from "./welcome";
import AppAth from "./app-ath";
import AppRef from "./app-ref";
import AppAdmin from "./app-admin";

fetch("api/users/role.json")
    .then((res) => res.json)
    .then((user_role) => {
        if (user_role == "ath") {
            ReactDOM.render(<AppAth />, document.getElementById("root"));
        } else if (user_role == "ref") {
            ReactDOM.render(<AppRef />, document.getElementById("root"));
        } else if (user_role == "admin") {
            ReactDOM.render(<AppAdmin />, document.getElementById("root"));
        } else {
            ReactDOM.render(<Welcome />, document.getElementById("root"));
        }
    })
    .catch((err) => console.log(err));
            

像這樣，您可以在 React 中保留應用程序的標准文件夾樹，並在它們之間共享公共文件夾中的所有子組件、掛鈎和文件：

為了使用戶分開，您將用戶的角色存儲在 cookie 中並在服務器端檢查角色。

如果 cookie 為空，它將始終返回到歡迎組件。

旁注：當然，文件夾結構始終取決於捆綁程序設置！ 因此，您的應用程序的文件夾結構可能與圖像上的不同。