当前位置：首页 > 安卓源码 > 功能分类 > 项目源码 >

简洁美观的计算器包括Android和iOS

时间：2017-03-27 22:57 来源：互联网作者：源码搜藏收藏

暂无演示立即下载

源码类别：项目源码
源码大小：未知
编码格式：gbk,utf8,不限
运行环境：Android studio

广告推荐

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

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上预览并启用热重新加载

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