分享 React-Native 组件

Question

I am newbie in react, react-native and nodejs.

I tried create node module via npm init . In this module i created a component - for start styled button. I packed this via npm pack a link in application in package.json file by " file:../shared/_dist/shared-1.0.0.tgz " in dependency section.

in my shared index.js is

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

in react application is

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

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

It works!

Then i tried create component which using react-native-async-storage/async-storage (via npm install in shared project). After increase version, npm pack, link and install new version of package I get error that AsyncStorage is null after android run.

Why AsyncStorage is null? Have I create dependecy in both projects? (that's a weird solution - it doesn't feel right to me, although it works) How to share for example resources like icons, images etc.

We need to develop three applications on the same data (API) in the field of sports for different types of users (athlete, referee, administrator of the sports ground) and a lot of code we need to share - icons, contexts (user, theme etc...), error handling, API calls etc... We don't want develop it as one big rights-controlled application, but as several small applications for individual roles.

What is the best way how to share code between more react-native apps?

Answer 1

AsyncStorage is deprecated, see here .

You could create a start.js that links to different apps based on the feedback of your database (the roles of your users). Else, it will route to a welcome component with, for example, a login and registration child-component.

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));
            

Like that, you can keep the standard folder tree of an application in React and share all child-components, hooks and files in the public folder between them:

To keep the users separate, you store the role of the user in a cookie and check for the role on the server side.

If the cookie is empty, it will always lead back to the welcome component.

Side note: of course, the folder structure is always dependent on the bundler setup! So the folder structure of your app could differ from the one on the image.