bởi Mohammed Salman
Khi tôi đang viết bài báo này, Luật Atwood xuất hiện trong tâm trí tôi:
Bất kỳ ứng dụng nào có thể được viết bằng JavaScript, cuối cùng sẽ được viết bằng JavaScript. – Jeff Atwood

Ban đầu được đăng trên blog của tôi!
Hôm nay chúng ta sẽ xem xét Proton Native và tạo một ứng dụng đơn giản với nó.
không giống điện tử ứng dụng, ứng dụng được xây dựng với Proton bản địa thực sự là tự nhiên (do đó có tên) và không dựa trên web dựa trên crom.
Proton bản địa giống như Phản ứng tự nhiên nhưng đối với máy tính để bàn. Nó biên dịch thành mã nền tảng gốc, do đó, nó trông và hoạt động giống như một ứng dụng gốc.
Vậy hãy bắt đầu.
các cửa sổ
Cài đặt các công cụ xây dựng bằng cách chạy:
npm install --global --production windows-build-tools
Linux
Bạn sẽ cần những thư viện này:
- libgtk-3-dev
- xây dựng cần thiết
Mac
Bạn không cần bất cứ điều gì.
Bây giờ hãy chạy như sau:
npm install -g create-proton-app
và
create-proton-app my-app
để làm một dự án mới.
Mở thư mục dự án bằng trình chỉnh sửa mã yêu thích của bạn. Thư mục sẽ trông như thế này:
└───node_modules
├───.babelrc
├───index.js
├───package.json
└───package-lock.json
index.js
nên trông như thế này:

Giống như bất kỳ Dự án gốc React hoặc React nào, chúng tôi nhập thư viện phản ứng và tạo một thành phần lớp.
Các App
phần tử chỉ là một thùng chứa chứa Window
và Menu
và Window
có ba đạo cụ: title
(tiêu đề cửa sổ), size
(lấy một đối tượng chứa chiều rộng và chiều cao của cửa sổ) và menuBar
(đặt thành false vì chúng tôi không muốn có thanh menu).
Trước khi bắt đầu mã hóa, hãy cài đặt crypto
sử dụng npm
:
npm i crypto
Chúng tôi sẽ sử dụng crypto
để băm văn bản bằng thuật toán MD5.
index.js
import React, { Component } from "react";
import { render, Window, App, Box, Text, TextInput } from "proton-native";
import crypto from "crypto";
class Example extends Component {
state = { text: "", md5: "" };
hash = text => {
this.setState({ text });
let md5 = crypto
.createHash("md5")
.update(text, "utf8")
.digest("hex");
this.setState({ md5 });
};
render() {
return (
<App>
<Window
title="Proton Native Rocks!"
size={{ w: 300, h: 300 }}
menuBar={false}
>
<Box>
<TextInput onChange={text => this.hash(text)} />
<Text>{this.state.md5}</Text>
</Box>
</Window>
</App>
);
}
}
render(<Example />);
lần đầu tiên tôi nhập khẩu Text
và TextInput
để tôi có thể sử dụng chúng sau này. Sau đó trong class
sau khi thiết lập text
và md5
để làm trống các chuỗi trong state
đối tượng, tôi đã tạo một chức năng hash
mất một text
tranh luận.
bên trong hash
chức năng, chúng tôi đặt trạng thái thành text
và tuyên bố md5
để lưu trữ văn bản được mã hóa (như bên dưới)
this.setState({ text });
let md5 = crypto.createHash("md5")
.update(text, "utf8").digest("hex");
và đặt đối tượng trạng thái thành cập nhật md5
.
this.setState({ md5 });
Các render
phương thức trả về một số jsx
thành phần. Các Box
yếu tố giống như div
trong Phản ứng, hoặc View
trong React Native, chứa TextInput
và Text
. Điều này là do phần tử cửa sổ cha mẹ không cho phép có nhiều hơn một phần tử con.
TextInput
có một onChange
prop sẽ được gọi mỗi khi văn bản thay đổi. Do đó, chúng tôi đặt nó thành một hàm mũi tên béo có một text
đối số và trả về hash
chức năng chúng tôi đã khai báo trước đó.
Vì vậy, bây giờ mỗi khi văn bản thay đổi, text
được băm và đặt thành md5
.
Bây giờ nếu chúng ta chạy nó với
npm run start
cửa sổ này sẽ bật lên:

Và nếu chúng ta nhập một số văn bản, nó sẽ được băm thành md5 như thế này:

Bạn có thể nói “Trông nó xấu xí – hãy thêm một số kiểu dáng cho nó.” Chà, tại thời điểm viết bài này, Proton Native vẫn còn sơ khai. Nó rất lỗi và nó không hỗ trợ kiểu dáng (chưa), nhưng đó là một dự án thú vị để chơi.
Nếu bạn muốn đóng góp cho dự án, hãy kiểm tra repo.
Nếu bạn có bất kỳ câu hỏi hoặc đề xuất nào, vui lòng bình luận hoặc liên hệ với tôi trên Twitter @4msal4 và đừng quên nhấn nút vỗ tay đó 🙂
👇Xem câu chuyện trước đây của tôi👇
Cách xây dựng một ứng dụng tin tức với React Native.