Question

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

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

Answer 1

我为React和React-Native完成了一个基于代码的应用程序（包）。我可以告诉你我的解决方案和经验。

<强> UI

两个框架都使用相同的语法来描述UI（JSX）。如果你详细了解，你会发现存在一些差异。（ReactJS：<div/> || React-Native：<View/>）。因此，您的架构中始终存在“框架特定”部分，但您可以使用JSX的强大功能为样式或数据甚至函数等组件提供道具。

功能

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

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

功能应该没问题，因为没有太大的区别。但是如何跨越UI特定模式。我的解决方案是为框架特定组件编写某种伪代码：

在每个框架中写一个代表你的伪类零件。以下示例显示了拒绝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;

为共享代码（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在共享代码包/库中使用您的组件。如果你是初学者，一开始可能会让人感到困惑，但如果你使用和理解它会给你一个很大的价值。

进一步阅读

Answer 2

web / ios / android的单个代码库有很多选项。最简单的是构建一个webapp。

有些选择是：

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

Answer 3

检查一下。 React Native for Web

已经被那些大公司使用，对我来说看起来非常有希望。能够均匀分享演示代码是非常惊人的！

Answer 4

最好的堆栈会对网站做出反应并为移动设备做出反应，因为react使用虚拟dom来加速你的网站。当谈到单个代码库和优化的APK大小以及社区支持时，react-native远远领先于本机脚本。

Answer 5

我建议选择Web上的React和移动版上的React Native，这会让您的开发人员学习一次并为任何平台编写。而且我个人不建议所有平台使用单一代码库，因为这会使事情变得混乱。我宁愿维护3个针对Web，Android和IOS的代码库（或至少两个针对Web和移动设备的代码库），并共享通用代码。

您可以使用混合应用程序来具有单个代码库，但请注意，这些应用程序是打包的应用程序，因此会降低性能。

您还可以使用react-native-web在移动设备和Web上使用相同的代码库。

Answer 6

您可以创建PWA，也可以使用“ React Native Web”： https://github.com/necolas/react-native-web

Answer 7

两者都有起伏。但是我注意到更多的开发人员倾向于React。但是，在完成这两项工作之后，我将告诉您密切关注 Flutter 。因为我发现使用 Flutter + Dart 构建的应用的外观，感觉和性能在两者上都有优势。但是像我一样，每个开发人员都只会退缩，因为到今天为止，他们的WEB部分仍处于测试阶段。

Answer 8

检查用于移动、网络、Mac 和 Windows 应用程序的单一代码库的类星体框架。

移动和网络的单一代码库

8 个答案: