移动和网络的单一代码库

Question

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

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

Answer 1

我为ReactJS和React-Native做了一个基于代码的包。我可以告诉你我的解决方案和经验。

用户界面

两个框架都使用相同的语法来描述 UI ( JSX )。如果您更详细地了解，您会发现有几个不同之处：

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

功能

React-Native 使用/包含 ReactJS 框架，并且都在 JavaScript 虚拟机中运行。因此，对于“非本机/用户界面功能”，您可以在两个应用程序（ReactJS && React-Native）中使用旧的 JavaScript 编写的功能或包提供（例如通过 npm）功能

如何为两个应用程序使用一个代码

现在我们现在功能没有问题。但是如何了解 UI 细节。我的解决方案是为框架特定组件编写某种伪代码：

1. 为每个框架编写一个伪类，代表您的组件。以下示例显示了一些拒绝 RN View类的类：

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

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;

我在React-Native端实现了一个非常简单的 View 组件

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;

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

我在我的共享代码项目中实现了一个类，它为我保留了视图。在此代码中，您可以重用View组件并使用此组件编写 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在共享代码包/库或其他任何地方使用您的组件。如果您不熟悉它，一开始可能会令人困惑，但如果您使用并理解它，它会给您带来很大的价值。

进一步阅读

• Christian Sepulveda - 在 React 和 React Native 应用程序之间共享代码
• Ihor Burlachenko - React 和 React-Native 之间的代码共享

Answer 2

对于 web/ios/android 的单一代码库有很多选项。最简单的是构建一个网络应用程序。

一些选项是：

• 渐进式网络应用程序
• 混合应用程序（如 Ionic）