0
176
VistasComparta componentes React-Native
Soy novato en react, react-native y nodejs.
Intenté crear un módulo de nodo a través de npm init . En este módulo, creé un componente: para el botón de estilo de inicio. Empaqué esto a través de npm pack un enlace en la aplicación en el archivo package.json por " file:../shared/_dist/shared-1.0.0.tgz " en la sección de dependencia.
en mi index.js compartido es
import MyButtonFirst from './components/buttons/MyButtonFirst'; module.exports = { MyButtonFirst };en la aplicación de reacción es
import React from 'react; import { MyButtonFirst } from 'shared'; export default function MySharedButton() { return <MyButtonFirst />; }¡Funciona!
Luego intenté crear un componente que usaba react-native-async-storage/async-storage (a través de la instalación de npm en un proyecto compartido). Después de aumentar la versión, empaquetar npm, vincular e instalar una nueva versión del paquete, aparece el error de que AsyncStorage es nulo después de ejecutar Android.
¿Por qué AsyncStorage es nulo? ¿He creado dependencia en ambos proyectos? (esa es una solución extraña, no me parece bien, aunque funciona) Cómo compartir, por ejemplo, recursos como íconos, imágenes, etc.
Necesitamos desarrollar tres aplicaciones sobre los mismos datos (API) en el campo de los deportes para diferentes tipos de usuarios (atleta, árbitro, administrador del campo deportivo) y mucho código que necesitamos compartir: iconos, contextos (usuario, tema, etc...), manejo de errores, llamadas API, etc... No queremos desarrollarlo como una gran aplicación con derechos controlados, sino como varias aplicaciones pequeñas para roles individuales.
¿Cuál es la mejor manera de compartir código entre más aplicaciones nativas de reacción?
1 Respuestas
Responde la pregunta0
AsyncStorage está en desuso, consulte aquí .
Puede crear un start.js que se vincule a diferentes aplicaciones en función de los comentarios de su base de datos (las funciones de sus usuarios). De lo contrario, se enrutará a un componente de bienvenida con, por ejemplo, un componente secundario de inicio de sesión y registro.
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));Así, puede mantener el árbol de carpetas estándar de una aplicación en React y compartir todos los componentes secundarios, ganchos y archivos en la carpeta pública entre ellos:
Para mantener a los usuarios separados, almacena el rol del usuario en una cookie y verifica el rol en el lado del servidor.
Si la cookie está vacía, siempre volverá al componente de bienvenida.
Nota al margen: por supuesto, la estructura de carpetas siempre depende de la configuración del paquete. Por lo tanto, la estructura de carpetas de su aplicación podría diferir de la de la imagen.