ReactXP: Xây dựng ứng dụng cross platform
Xây dựng các ứng dụng đa nền tảng với React không phải là một điều mới. Nhiều công ty đã sử dụng (và vẫn đang sử dụng) React Native cho các dự án ưu tiên thiết bị di động ngày nay. ReactXP có vẻ sẽ tiến xa hơn điều này bằng cách tìm cách sử dụng lại lớp xem trên nhiều nền tảng, điều mà React Native không đạt được.
Tạo một dự án ReactXP
Ta có thể sao chép repo GitHub với nhiều mẫu khác nhau được bao gồm hoặc cài đặt Create RX CLI trên phạm vi global như sau:
$ npm install create-rx-app -g Để tạo ứng dụng ReactXP đầu tiên của bạn, hãy chạy như sau sau khi cài đặt CLI:
$ create-rx-app HelloRX # OR $ npx create-rx-app HelloRX Nếu ta điều tra file package.json , ta có thể hiểu được một số thông tin chi tiết về cách bắt đầu / xây dựng dự án của ta như được thấy trong đối tượng scripts :
"scripts": { "start:android": "yarn rn-cli run-android", "start:windows": "yarn rn-cli run-windows", "start:ios": "yarn rn-cli run-ios", "start:web": "cross-env platform=web webpack-dev-server --config=web/webpack/dev.js --progress --colors --mode=development", "start:rn-dev-server": "yarn rn-cli start --reset-cache", "build:web": "cross-env platform=web webpack --config=web/webpack/prod.js --progress --colors --mode=production", } Vì mục đích của bản demo của ta , tôi sẽ chạy phần mềm này trên iOS và web. Bạn có thể làm tương tự hoặc chọn một nền tảng khác mà bạn chọn.
$ npm run start:web $ npm run start:ios 
Xin chào, Alligator.
Ta sẽ tạo một ứng dụng mẫu sử dụng ReactXP để fetch dữ liệu từ server HTTP và hiển thị nó trên màn hình. Bên trong App.tsx , hãy thêm mã sau:
import React from 'react'; import { Component, Styles, View, Text, ScrollView } from 'reactxp'; const _styles = { main: Styles.createViewStyle({ flex: 1, }), navBarText: Styles.createTextStyle({ color: 'white', }), navBar: Styles.createViewStyle({ justifyContent: 'center', alignItems: 'center', backgroundColor: '#0984e3', height: 65, }), scroll: Styles.createScrollViewStyle({ alignSelf: 'stretch', backgroundColor: '#f5fcff', padding: 16, }), user: Styles.createTextStyle({ marginBottom: 10, }), }; export class App extends Component { public state = { users: [], }; public async componentWillMount() { const req = await fetch(`https://jsonplaceholder.typicode.com/users`); const data = await req.json(); this.setState({ users: data, }); } public displayUsers = (users) => { return users.map((user) => ( <View key={user.id} style={_styles.user}> <Text>{user.name}</Text> <Text>{user.email}</Text> </View> )); } public render() { return ( <View useSafeInsets={true} style={_styles.main}> <View style={_styles.navBar}> <Text style={_styles.navBarText}>Users</Text> </View> <ScrollView style={_styles.scroll}>{this.displayUsers(this.state.users)}</ScrollView> </View> ); } } Bắt đầu với đối tượng _styles của ta , để điều chỉnh các kiểu trên từng nền tảng, ta sử dụng createXStyle để chuyển đổi kiểu thành từng phần tử root duy nhất. Như mong đợi, mỗi phần tử kiểu phải trùng với thẻ thích hợp - vì vậy, ví dụ: createViewStyle phải được đặt trên phần tử View .
Mọi thứ từ đây trở đi tương tự như một ứng dụng React / React Native tiêu chuẩn. Lưu ý cách ta phải nhập từng thành phần từ reactxp trước khi sử dụng nó.
Đây là cách ứng dụng cuối cùng của ta trông như thế nào:
Bạn có thể xem danh sách đầy đủ các thành phần bên trong ReactXP tại đây .
Các tin liên quan
