【React Native】Android、iOSアプリ開発入門

React NativeでAndroid、iOSアプリを開発する方法について、入門者向けに紹介します。

【はじめに】React Nativeとは

React Nativeとは、Facebook社が開発しているクロスプラットフォーム開発フレームワークです。
その名のとおり、プログラミング言語はReact.js(JavaScript)を使用します。
同様にJavascriptで開発できるCordovaとの違いは、ネイティブアプリとして生成できる点です。
ネイティブアプリなので、処理が高速となります。

【環境構築】インストール

① Node.jsをインストールします。

詳細記事
1 【Node.js】Windows10にインストール

② コマンドラインツールのインストール

$ npm install expo-cli --global

③ プロジェクトを作成し、プロジェクト直下へ移動します。

$ expo init my-project
$ cd my-project

④ テンプレートはblankを選択します。

⑤ 以下のフォルダ構造でプロジェクトが作成されます。


my-project
  |-assets/
  |-node_modules/
  |-App.js
  |-app.json
  |-package.json

【動作確認】Hello World

① プロジェクト直下で以下のコマンドを実行します。

$ expo start

② コンソールとブラウザ上にQRコードが表示されれば成功です。

③ 「App.js」に次のように1行追加します。

■App.js

export default class App extends React.Component {
   render() {
     return (
        <View style={styles.container}>
          <Text>Open up App.js to start working on your app!</Text>
          <Text>Hello World</Text>
        </View>
     );
   }
}

④ また実行してHello Worldと表示されたら成功です。

$ expo start
関連記事
1 【Ionic入門】Android・iOS・Windowsアプリ開発編
2 Javascript入門 サンプル集
3 Java入門
4 Node.js入門
関連記事