angular - 移动和网络的单一代码库

Question

我们将为我们公司启动一个订单状态应用程序项目，该应用程序将作为 Web 应用程序以及 android/ios 应用程序托管。我们开始研究并得出结论，从 React 和 React Native 或 Angular 和 Native Script.Can 开始任何人都建议选择哪一个作为最终目标是为 Web 和移动维护单一代码库。

[编辑 1]:谢谢大家。你们中的许多人建议使用 Ionic/Cordova、PWA，但所有这些似乎都构建了一个混合应用程序，但我正在寻找类似 native 应用程序的东西，它也可以在浏览器上运行。例如在 react native在这种架构中，JavaScript 文件被转换为真正的原生组件(Android/IOS)。但是 react 和 react-native 的问题在于没有单一的代码库。

Answer 1

我为 做了一个基于代码的包ReactJS 和 react 原生 .我可以告诉你我的解决方案和经验。
用户界面
两个框架都使用相同的语法来描述 UI ( JSX )。如果您更详细地了解，您会发现有几个不同之处:

ReactJS:<div/>

react 原生:<View/>这意味着您的应用程序/架构中总会有一个“特定于框架的”部分。要将特定代码最小化为仅差异，您可以使用 JSX 为样式、数据或事件函数等组件提供 Prop 。

功能
React-Native 使用/包含 ReactJS 框架，并且都在 JavaScript 虚拟机中运行。因此，对于“非 native /用户界面功能”，您可以在两个应用程序(ReactJS && React-Native)中使用良好的旧 JavaScript 编写功能或提供的包(例如通过 npm)功能
如何为两个应用程序使用一个代码
现在我们现在功能没有问题。但是如何了解 UI 细节。我的解决方案是为框架特定组件编写某种伪代码:

为每个框架编写一个伪类，代表你的
成分。以下示例显示了一些拒绝 RN 的类(class)
View类(class):

我在 上实现了一个非常简单的 View 组件ReactJS 边

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 原生 边

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;

为您的 创建一个自己的项目共享代码 ( Create project ) 并将您编写的 View 组件提供给它。这意味着您在 React 或 React-Native 项目中导入共享代码，并为共享代码项目提供特定于框架的组件。

我在 中实现了一个类共享代码 项目为我持有观点。在此代码中，您可以重用 查看 组件并使用此组件编写 UI。这意味着在 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 项目中使用它。也许是因为我在 webpack 中缺少经验，但我遇到了很多麻烦。这是因为如果你使用 create-react-app 构建一个 React 应用程序，webpack 配置已经为你完成，并且将事情分解到他们想要的水平并不容易。

还有一点是你应该使用 High-Order-Components在您的共享代码包/库或其他任何地方使用您的组件。如果您不熟悉它，一开始可能会令人困惑，但如果您使用并理解它，它会给您带来很大的值(value)。

进一步阅读

Christian Sepulveda - Share Code between React and React Native Apps

Ihor Burlachenko - Code sharing between React and React-Native