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-toolsLinux
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-appvà
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.jsonindex.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à Menuvà 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 cryptoChú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 startcử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.
