Я создал одно приложение (пакет) на основе кода для React и React-Native. Я могу рассказать вам свое решение и опыт с этим.
UI
Обе платформы используют один и тот же синтаксис для описания пользовательского интерфейса (JSX). Если вы углубитесь в детали, вы увидите, что есть несколько отличий. (ReactJS: <div/> || React-Native: <View/>). Таким образом, в вашей архитектуре всегда будет часть, специфичная для фреймворка, но вы можете использовать возможности JSX для обеспечения поддержки таких компонентов, как стили, данные или даже функции.
Функциональность
React-Native использует / содержит платформу ReactJS и все работает на виртуальной машине JavaScript. Таким образом, для «не встроенной функциональности» вы можете использовать все письменные функции JavaScript или предоставляемые пакеты (например, через npm) для обоих приложений (React && React-Native)
Как использовать один код для обоих приложений
Функциональность не должна быть проблемой, потому что нет большой разницы. Но как пройти через определенный шаблон пользовательского интерфейса. Моим решением было написать какой-то псевдокод для компонентов, специфичных для фреймворка:
- В каждом фреймворке напишите псевдокласс, который обозначает ваш
составная часть. В следующем примере показан некоторый класс, отклоняющий RN
Вид класс:
Моя реализация очень простого компонента View в ReactJS side
import React, { Component } from 'react';
class View_Wrapper extends Component {
render() {
return (
<div style={this.props.style}>
{this.props.children}
</div>
);
}
}
export default View_Wrapper;
Моя реализация очень простого компонента View в React-Native side
import React, { Component } from 'react';
import {View} from 'react-native';
class View_Wrapper extends Component {
render() {
return (
<View style={this.props.style}>
{this.props.children}
</View>
);
}
}
export default View_Wrapper;
- Создайте собственный проект для вашего shared-кода ( Создайте проект ) и предоставьте в него свои письменные View компоненты. Это означает, что вы импортируете свой общий код в свой проект React или React-Native и даете проекту shared-code свой специфичный для фреймворка компонент.
Моя реализация класса внутри моего проекта shared-code , который поддерживает мое представление. В этом коде вы можете повторно использовать компонент View и написать свой интерфейс с этим компонентом. Это означает, что в React будет div против того, что React-Native будет содержать View
let View = undefined;
const registerView = (View) => {
UIProvider.View = View
};
const getView = () => {
return UIProvider.View;
};
let UIProvider = {
View: View
};
//Functions for component registration
UIProvider.registerView = registerView;
//Functions to receive shared components
UIProvider.getView = getView;
export {UIProvider};
Проблемы, с которыми я справился
Ключом к использованию компонентов является разбиение всего на пустой JavaScript и использование его в ваших проектах React или React-Native. Возможно, благодаря моему отсутствию опыта в вебпаке, но у меня много проблем с этим. Они были вызваны тем, что если вы создаете приложение React с помощью create-реакции-приложения, то конфигурация веб-пакета сделана для вас, и разбить вещи до уровня, который они хотят, не так просто.
Еще один момент: вы должны использовать High-Order-Components , чтобы использовать ваши компоненты в вашем пакете / библиотеке с общим кодом или в любом другом месте. Если вы новичок в этом, это может сбить вас с толку в начале, но даст вам большую ценность, если вы используете и понимаете это.
Кроме того, чтение