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ここ内のコンポーネントの完全なリストを見ることができます。