React-360 二次开发的一些心得

react-360 二次开发的一些心得 前面花了一些时间介绍 《React-360 源码阅读 - 一张图带你理解 React-360 结构》,有兴趣可以阅读下。但是 React-360 相对我们而言,目前也还不是足够稳定,以及有的需求点他们也并未实现,因此很有可能我们需要进行二次开发; 因此我们首先需要去他们 Github 上 fork 一份, https://facebook.github.io/react-360/ 详情 »

React-360 源码阅读【6】- Video 分析

前面我先看了 React-360 源码阅读【5】- 核心 Compositor 里的内容,其中里面涉及了 video 作为背景的内容,今天分析一下 video 目录里面的内容;实际上我们如果要设置全景视频,可以直接通过调用; // Creating a Video Player const player = r360.compositor.createVideoPlayer('myplayer') 详情 »

React-360 源码阅读【5】

今天我们看下 compositor。顾名思义,compositor 应该是你第一个接触到的 访问属性,我们不妨回顾下官方代码 Client 里面的内容: function init(bundle, parent, options = {}) { const r360 = new ReactInstance(bundle, parent, { // Add custom options here fullScreen: true, 详情 »

React-360 源码阅读【4】- 初试 React-360-Web

react-360-web 顾名思义,就是在 web 端 运行的 react-360 的 SDK. 就像文档里面描述的; react-360-web 是 React 360 的环境运行时,它可以完成应用在 Web 端的渲染;它通过 Canvas 以及 WebVR API 来实现在 头显设备和浏览器的运行。 接下来直接看 详情 »

React 项目迁移 Webpack Babel7

不就前写了一篇 webpack 4 升级迁移 这里简单说下 React 项目的一些配置; 首先我们新建项目 react-web ,然后进入项目初始化 package.json; cd react-web && npm init 接下来我们安装 webpack ,这里需要注意一点,是命令行已经单独提取出来了,我们不仅需要安装 webpack 还需要安装 webpack-cli 详情 »

React-360 源码阅读【3】

React-360 源码阅读【3】 上一篇简单说了下 scripts 目录究竟用来做什么,今天我们开始进入到正题,我们看下Libraries 下究竟做了什么; 其实和 react-native 下的目录一致,罗列我们可用的组件和模块文件;比如: Pano Camera Sound ... 我们看下入口文件 react-360.js const React360 = { // React Native overrides get 详情 »

React-360 源码阅读【2】

接着前文 《React-360 源码阅读【1】》,下面主要分析构建这一部分业绩是 /scripts 目录下的内容; 结构 - build-packages.js - bump-versions.js - bundle.js - install-deps.js install-reps.js 在说这片代码之前,我们需要先去 packages/react-360-cli/ 详情 »

React-360 源码阅读 - 一张图带你理解 React-360 结构

终于开始准备连载这一系列,React-360 前身就是 React-VR。大概在 2.0.0 的时候还是使用 React-vr 来命名,但是随后重新开始了命名;因此安装的一些包的名称也有变化了。 比如我们在初始化的项目时候,需要安装 $ npm install -g react-360-cli 小插曲 为什么更名? 2017 年 Facebook 发布了 JavaScript 详情 »

React-core-image-upload V2.2 is released

React-core-image-upload is a really light-weight plugin for react.js developers to upload his images. Now you could also compress and crop image via this plugin. The 详情 »

使用 React 开发 Atom 插件

Atom 是目前非常流行的编辑器,除了好用小巧的特点,它丰富的插件也给开发者提供了很多的便利性。 Atom 是基于 Electron 开发的,也就是说我们可以通过写 HTML + CSS + JavaScript 的方式来构建我们的桌面应用。而一个典型的Electron App 的架构如图: 其实我们在完成实际的插件的部分,也就是工作的最上层,使用我们前端最基本的知识去实现基本的需求。当然这一层的实现,可以有很多方式,你可以使用简单的JS 去创建视图窗口,你也可以使用一些框架,比如 Vue. 详情 »