移动和网络的单一代码库

5 回答

• 0

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

  UI

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

  Functionality

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

  How to use one code for both apps

  功能应该没问题，因为没有太大的区别 . 但是如何跨越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项目中导入共享代码，并为共享代码项目提供特定于框架的组件 .

  我在 shared-code 项目中的一个类的实现对我来说很重要 . 在此代码中，您可以重用 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};
  

  Problems i got through this way

  • 使用组件的关键是将所有内容分解为空白JavaScript并在React或React-Native项目中使用它 . 也许是因为我在webpack中失去了经验，但我遇到了很多麻烦 . 它们之所以如此，是因为如果你使用create-react-app Build 了一个React应用程序，那么webpack配置就可以完成了，并且将它们分解到他们想要的水平并不容易 .

  • 另一点是你应该使用High-Order-Components在你的共享代码包/库中使用你的组件 . 如果你是新手，它可能会在一开始就让人感到困惑，但如果你使用和理解它会给你一个很大的 Value .

  Furthermore reading

  • Christian Sepulveda - Share Code between React and React Native Apps

  • Ihor Burlachenko - Code sharing between React and React-Native

  回复于 2024-05-05T18:04:22+08:00
• 1

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

  一些选项是：

  • Progressive Web App

  • 混合应用（如离子）

  回复于 2024-05-05T18:04:22+08:00
• 0

  看一下这个 . React Native for Web

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

  回复于 2024-05-05T18:04:22+08:00
• 0

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

  回复于 2024-05-05T18:04:22+08:00
• 0

  我建议选择React for web和React Native for mobile，它让你的开发人员学习一次并为任何平台编写 . 我个人并不建议所有平台都有一个代码库，因为它会使事情变得混乱 . 我宁愿为web，android和IOS维护3个代码库（或者至少有两个用于web和移动的代码库）并将共享公共代码 .

  您可以使用混合应用程序只有一个代码库，但要注意这些是包装的应用程序，因此性能下降 .

  您还可以使用react-native-web为移动和Web使用相同的代码库 .

  回复于 2024-05-05T18:04:22+08:00