简介

proton-native 是一个结合了 node, libui, react 的一个产物，使用 node 的环境， react 的语法和 libui 的跨平台调用 ui 控件的能力。proton-native 可用于构建跨平台的桌面应用，构建方式简单，构建的包轻量。

github 地址 ：https://github.com/kusti8/proton-native

官网：https://proton-native.js.org

使用

在安装了 node 环境的前提下开始创建一个 app，注意 node 版本，自己测试了一下发现 8.0 会报错，用了最新的 9.7.1 才不会出问题，使用最新的 node 8.9.4 LTS 版本也应该问题不大。

# install the cli app
npm install -g create-proton-app
# create your project
create-proton-app my-app
# move to your project directory
cd my-app
# run your app
npm run start

写了一个小 Demo，获取天气信息并展示出来

import React, { Component } from 'react'; // import from react
import { render, Window, App, TextInput, Grid, Box, Menu, Text } from 'proton-native'; // import the proton-native components
import http from 'http';

class Example extends Component {
    constructor(props) {
        super(props);
        this.state = {
            text: ''
        }
    }
    render() {
        return (
            <App>
                <Menu label="HI">
                    <Menu.Item>Hi</Menu.Item>
                </Menu>
                <Window title="天气情况" size={{w: 500, h: 500}}>
                    <Grid padded={true}>
                        <Box>
                        <Text>{this.state.text}</Text>
                        </Box>
                    </Grid>
                </Window>
            </App>
        );
    }

    componentDidMount() {
        //使用 node 的 http 模块
        http.get({
            hostname: 'mat1.gtimg.com',
            path: '/weather/inc/minisite2_125.js'
        }, (res) => {
            let rawData = '';
            res.setEncoding('utf8');
            res.on('data', (chunk) => { rawData += chunk; });
            res.on('end', () => {
                try {
                    this.setState({text: rawData});
                } catch (e) {
                    console.log(e);
                }
            });
        });
    }
}

render(<Example />); // and finally render your main component

只是纯粹获取信息展示出来，但是目前 proton-native 的表现还是非常糟糕的。

感想

初步使用 proton-native 后感觉和想象中还是有很大的差距，在构建 UI 方面确实没有 Electron 一类来得方便，并且在功能上还有很多缺失，连最基础的 Text 都会出现很多问题。从目前的扩展性和自由度角度出发还很难构建一个商业化的产品，但是对于自己尝试玩玩的小项目还是值得一试的。

如果要构建一个产品化的东西还是先考虑，Electron 和 Nwjs，React-Native 也有桌面版的在 macOS 下的 react-native-macos，当然如果要考虑跨平台的话，做一个壳放个 webview 也是一个选择哇。