一个React 渲染器，用于构建您的整个Electron应用程序

react-ionize

react-ionize is a library which lets you build the "non-browser" parts of an Electron app using React components to manage your application's state.

Electron applications consist of two types of process: a main process which manages the lifecycle of the application, and several renderer processes, which display webpages which comprise the application's GUI. While it's fairly common to use React and ReactDOM to build an HTML/CSS/js interface in the renderer process, react-ionize runs in the main process, managing things like window size/position, menu contents, and application-wide events.

Caveat Developer

react-ionize is still an EXPERIMENTAL, PRE-ALPHA library, and is not yet suitable for for use in a production app! It's a custom renderer built on top of the React Fiber reconciliation API, which itself is still under active development. (Not to mention, I've got a whole crop of Electron features yet to add.)

Getting Started

* npm install --save electron* npm install --save react@16.0.0-alpha.5* npm install --save react-ionize

Take a look at Ionize Example App to get started.

Hello, world!

const React = require('react');const Ionize = require('react-ionize');const path = require('path');const fs = require('fs');const INDEX_HTML_PATH = path.resolve(__dirname, 'index.html');const INDEX_HTML_SOURCE = `

Hello, Electron!

(Normally, you'd build and distribute an index.html along with your JS during your build process, but I wanted this example to be as independent of build processes as possible.)

API

Ionize.start(element, [callback])

Starts up an Electron application under Ionize. (Note: this will wait on the 'ready' Electron event before starting to render any elements.)

Elements

Generally speaking, the presence of an Ionize element in your component tree indicates that you want it to be there, and that Ionize should ensure its presence when rendering. This can lead to slightly surprising behavior if you're unfamiliar with React- for instance, if you want a window to actually go away when you close it, you need to make sure that the corresponding element actually gets unmounted!

Attachment point for event handlers related to the global app. Not strictly necessary if you don't need to register any of these (since React Fiber now supports multiple children without a parent element).

Generally speaking, children of are things related to the entire application: browser windows, dialogs, tray elements, and so forth. (Or at least, they will be once I get a chance to implement them.)

Event Handlers onReady- Fired immediately when the component is mounted. Under the hood, Ionize actually waits for 'ready' before even trying to start mounting everything, but this is here for the sake of API compatibility.

Represents an Electron BrowserWindow object.

fileThe HTML file you want to render in the Chrome browser instance. (Note that Ionize looks up this file relative to the runtime location of your project!) showWhen this prop transitions from false -> true, Ionize displays the browser window. When it transitions from true -> false, Ionize hides (but does not close) the browser window. If this is true when the element is mounted, Ionize will immediately show the window. onReadyToShowCalled when the window's ready-to-show event is triggered. You can use this to keep the window hidden until it's ready. showDevToolsIf this is true when the element is mounted, Ionize will open the Chrome Developer Tools when opening the browser window. sizeThis is a controlled prop, and behaves much like an element in traditional React apps. That is to say, if you provide size by itself, the user will not be able to resize the window- it will simply be that size, unless you provide an onResize handler to update the value provided.See also: https://facebook.github.io/react/docs/forms.html#controlled-components onResizeThis event handler is called with the new window size when the window size changes. If provided in conjunction with the size prop, it will allow the window to be resized (although you will need to update the value of the size prop accordingly). defaultSizeIf you don't care about tracking the window's size manually, you may provide a defaultSize prop to set the window to an initial size when it's mounted. position onMove onMoved defaultPositionThese props work pretty much the same as size, onResize, and defaultSize, except they represent the position on the screen.Keep in mind that these values might be funky if you're dealing with multiple monitors.