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から各コンポーネントをインポートする必要があることに注意してください。

最終的なアプリは次のようになります。