此项目显示如何构建源代码以在多个设备上运行。到目前为止，它能够运行：

• iOS和Android应用程序（基于反应本身）
• 基于NW或基于Electron的桌面应用程序
• 任何浏览器中的网站应用（基于反应）

网站应用程序的演示可在这里。

截图

移动应用（iOS和Android）

桌面应用（NW＆Electron）

网站应用

图书馆/工具

该项目使用的库和工具，如：

• es6语法和babel
• 对网站应用和桌面应用做出反应，
• 针对iOS和Android应用程式的原生应用
• NW打包桌面应用程序
• 电子包装桌面应用程序
• 通量组织数据流管理
• css-loader将样式集成在构建中
• 哼着创建构建
• webpack在开发阶段通过热重新加载来帮助

基本理念

所有代码都包含在src目录中，特别是用于构建的3个主要条目文件：

• index.ios.js并且index.android.js是用于构建iOS和Android应用程序的那些
• index.js 是用于构建网站应用和桌面应用程序的代码，因为代码是完全相同的。

助焊剂建筑行动/商店

所有的通量架构都可以分享到所有不同版本的100％。这意味着所有的逻辑和数据管理代码只能执行一次，并在任何地方重用。这样我们也可以使用简单的测试套件，并确保我们的代码在所有设备上正常工作。

组件

该项目的真正兴趣在于组件如何被组织以分享其大部分逻辑，并且仅重新定义每个设备特定的内容。

基本上，每个组件都有一个main Class，它继承了Class包含所有逻辑的基础。然后，主要组件导入在构建期间选择的不同的Render函数。文件扩展名.ios.js，.android.js或.js由构建工具用于仅导入正确的文件。

这些.native.js文件包含两个移动平台（iOS和Android）之间共享的代码。目前，由于所有代码现在共享.ios.js，.android.js文件和文件将构成该.native.js文件。但是，如果组件因平台具体原因而需要不同，则该代码将被包含在相应的平台特定文件中。

最后，每个组件由6个文件定义。如果我们看屏幕组件，这里是它的结构。

Screen.js
├── ScreenBase.js
├── ScreenRender.ios.js (specific to iOS build
├── ScreenRender.android.js (specific to Android build)
├── ScreenRender.native.js (shared mobile app code - iOS & Android)
└── ScreenRender.js (used during Website and Desktop build)

这里是Class组成文件的主文件。

' use strict ' ;

 从“ ./ScreenBase ”导入基数  ;
从“ .ScreenRender ”导入渲染 ;    

export  default  class  Screen  extends  Base {
   constructor（props）{
     super（props）;
  }

  render（）{
     return  Render。调用（此，此。道具，此。状态）;
  }
}

下一步是什么

以下是关于下一步可能遇到的一些想法：

• 使网站应用程序同构/通用

谢谢罗伯特的真棒设计

我想感谢罗伯特·奥多夫，他授权我重用他非常漂亮的设计。罗伯特的原创设计是他在这里可见的“简化”项目的一部分。

如何构建/运行项目

运行任何具体项目前的一般要求

• npm install 安装所有依赖项，React and React Native等。

使用某些版本的npm（> = v3.3.10 <= v3.6.0）

有些构建从npm包括错误npm install。因此，如果您使用的是包含3.3.10到3.6.0范围内的npm版本，则必须运行npm install两次。那些包括npm v3.3.12的版本是默认捆绑的，从版本v5.1.0到v5.5.0的节点。

• npm install npm
• npm install npm运行它两次，因为第一次运行＃10985后将不会安装程序包

移动应用（iOS和Android）

React Native的要求

iOS

• OS X
• 建议使用Xcode 6.3或更高版本（Xcode仅在Mac上运行）。
• Homebrew是安装节点，守望者和流的推荐方式。
• brew install node
• brew install watchman。我们建议安装守望者，否则你可能会遇到节点文件查看错误。
• brew install flow。如果要使用流量。

Android

• 请遵循以下官方文档指南：http : //facebook.github.io/react-native/docs/getting-started.html#android-setup（包括实验性Windows和Linux支持）

运行移动应用程序

iOS

• 打开iosApp.xcodeproj并在Xcode中运行。
• 在你的iOS模拟器中点击cmd + R来重新加载应用，看看你的改变！

Android

• 打开一个模拟器。（Genymotion或运行android avd）
• 运行react-native run-android在这个项目的根目录。
• 如果尝试在设备上运行，请阅读以下指南：http : //facebook.github.io/react-native/docs/running-on-device-android.html#content

恭喜！您刚刚成功将该项目作为iOS或Android应用程序运行。

网站应用

反应要求

没有任何额外的要求，因为你已经安装了deps npm install。

快速开始

• npm run build 建设项目（至少第一次）
• npm run serve-web在浏览器中使用webpack-dev-server 在http：// localhost：8000 / index.web.html或http：// localhost：8000 / webpack-dev-server / index.web.html上预览并启用热重新加载

恭喜！您刚刚成功将该项目作为网站应用程序运行。

桌面应用程序

您可以使用NW或电子来运行项目。

NW要求

要运行该项目，您应该运行如下：

/path/to/nw .

在OSX上，可执行文件位于.app文件中的隐藏目录中。安装它的更简单的解决方案是在http://nwjs.io/上下载应用程序，然后将其复制到您的应用程序文件夹。您现在可以运行：

/Applications/nwjs.app/Contents/MacOS/nwjs .

您还可以设置一个别名来调用二进制文件。

alias nw="/Applications/nwjs.app/Contents/MacOS/nwjs"

快速从NW开始

• npm run build 建设项目（至少第一次）
• npm run serve-nw 启动桌面应用程序并启用livereload

恭喜！您刚刚成功将该项目作为桌面应用程序运行。

电子快速启动

• npm run build 建设项目（至少第一次）
• npm run serve-electron 启动桌面应用程序并启用livereload

资源均来自第三方，谨慎下载，前往第三方网站下载