ReactXP:クロスプラットフォームアプリの構築
Reactを使用してクロスプラットフォームアプリケーションを構築することは新しいことではありません。 今日、多くの企業が React Native をモバイルファーストプロジェクトに使用しています(そして現在も使用しています)。 ReactXPは、複数のプラットフォーム間でビューレイヤーを再利用しようとすることで、これをさらに進めようとしています。これは、ReactNativeではそのままでは実現できません。
ReactXPプロジェクトの作成
さまざまなサンプルが含まれているGitHubリポジトリのクローンを作成するか、次のようにCreateRXCLIをグローバルにインストールできます。
$ npm install create-rx-app -g
最初のReactXPアプリケーションを作成するには、CLIをインストールした後に次を実行します。
$ create-rx-app HelloRX # OR $ npx create-rx-app HelloRX
package.json
ファイルを調査すると、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", }
デモの目的で、これをiOSとWebで実行します。 同じことを行うことも、選択した別のプラットフォームを選択することもできます。
$ npm run start:web $ npm run start:ios
こんにちは、ワニ。
ReactXPを使用してHTTPサーバーからfetch
データを作成し、画面に表示するサンプルアプリケーションを作成します。 App.tsx
の中に、次のコードを追加します。
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> ); } }
_styles
オブジェクトから始めて、各プラットフォーム全体でスタイルを調整するために、createXStyle
を使用して、スタイルをそれぞれの固有のネイティブ要素に変換します。 予想どおり、各スタイル要素は適切なタグと一致する必要があります。たとえば、createViewStyle
はView
要素に配置する必要があります。
これ以降はすべて、標準のReact /ReactNativeアプリケーションに似ています。 使用する前に、reactxp
から各コンポーネントをインポートする必要があることに注意してください。
最終的なアプリは次のようになります。
ReactXPここ内のコンポーネントの完全なリストを見ることができます。