こんにちは！ QOXプログラマー担当の山田です
今回は、ReactNativeの勉強する機会があったので、まとめていこうと思います！
Expoは、ReactNativeを簡単に扱えるように抽象化されたツールです。
このツールを使うことで、アプリのビルド、デプロイ、更新などが簡単に行えるようになります。
初心者に扱いやすい仕様になっているので、ReactNativeの公式チュートリアルにも紹介されています。
ただしデメリットもあります。
JavaScriptだけで作られたライブラリは、npmコマンドで追加できますが、
Java/Objective-Cで作られたライブラリはExpoに元々入っているものしか使えないようです。
実際に使うときは見極めて採用する必要がありますね。
まずはNode.jsをインストールする必要があります。
Node.jsのインストールについては、下記の記事にインストール方法が載っていますので参考にしてみてください。
nodebrewでnodeのバージョンを切り替える方法
Node.jsが無事にインストールができましたら、Expoのインストールに移っていきましょう。
$ npm install -g expo-cliインストールがうまくいったら環境構築は完了です。
簡単ですね(^-^)
環境構築が済んだら早速プロジェクトを作成していきましょう。
任意のフォルダーに移動して下記のコマンドを打ってください。
「my-app」がプロジェクト名になります。
$ expo init my-appコマンドを実行すると選択画面が現れます。
今回は、一番上の「blank」を選択したいと思います。
上記のコマンドの末尾に「-template blank」など付けると、この選択画面を飛ばすこともできます。
次に実機で動かすための「Expo」アプリを入れていきます。
これで準備は完了です！
それでは実際に動かして見ましょう。
端末の接続しているwifiとサーバーを起動しているPCの接続は同じにしてください。
作成したプロジェクトを開いて下記のコマンドを打ってください。
$ npm startコマンドを実行した後ターミナルにQRコードが出るので、カメラで読み取ってください。
ダウンロードが始まるのでしばらく待ち…
この画面が出たら成功です！
コードをいじったりして
//App.js
export default function App() {
return (
<View style={styles.container}>
<Text style={styles.text}>I am React master</Text>
<StatusBar style="auto" />
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'yellow',
alignItems: 'center',
justifyContent: 'center',
},
text: {
fontSize: 30,
}
});
コードを書き換えて保存を行うと自動的に更新してくれます。
便利ですね(^-^)
更新した後はこんな感じで表示されました。
これであなたもReactNativeマスターです！
今回は、ReactNative ＋ Expoの環境構築についてまとめて見ました。
僕は参考書を読みながら進めてましたが想像以上に一瞬でできましたし、
何よりWindowsPCを使って実機で確認できるのは感動ものでした。
とても素晴らしいツールですねd(^_^o)
