こんにちは、nukkyです。
今回は前回ReactNativeの開発環境を作成したので、開発の基礎としてシミュレータでの確認と初期画面の表示を少し変更してみたいと思います。
※キャプチャはiOSのシミュレータになります。
前回の記事はこちら
ReactNative環境構築[Android/iOS]
$react-native run-ios
ターミナルで前回作成したプロジェクトのディレクトリを開き、上記のコマンドでiOSのシミュレータが起動します。
シミュレータで表示されている初期画面の内容を変更してみます。
作成したプロジェクトの直下に「App.js」というファイルがあります。
これが現在起動時に表示される画面のソースになります。
今後開発で新しいソースを増やしていくと思いますが、最初に読み込まれるソースはこの「App.js」になりますので、基本はこちらに画面遷移などを追加していくことになります。
では早速「App.js」の内容を変更し、表示テキストの変更を行います。
現在画面に表示されている以下の内容を、
<Text style={styles.welcome}>Welcome to React Native!</Text> となっている箇所を定番の「Hello, World!」に変更します。
<Text style={styles.welcome}>Hello, World!</Text> ここで変更を確認するためにシミュレータの更新を行います。その際いちいち「react-native run-ios」をしなくても、jsの更新だけであれば「command + R」で更新を行うことができます。早速シミュレータで「command + R」を実行してみます。
実際シミュレータで起動してみた人や、最初のスクリーンショットをみると「Press Cmd+R to reload, Cmd+D or shake for dev menu」と親切に更新とデバッグメニューについて表示されています。そこでデバッグメニューについて簡単に紹介したいと思います。
「Realod」は、「command + R」による機能と同様で、主にReactNativeプロジェクト内の、JavaScriptコードの変更を適用するために使用します。
「Debug JS Remotely」は、ブラウザのデベロッパーツールを利用してアプリケーションをデバッグするために使用します。
こちらに関してはまた別の記事で紹介したいと思います。
「Live Reload」を有効にすると、JSコードの変更を検知すると、自動で再起動(Realod)されるようになります。
毎回「Realod」を押す手間が省けますが、わずか一行の修正でもアプリケーションが勝手に再起動されるようになります。
iOS版のアプリケーション用に、プロセスに関するプロファイリングを行うためのツールのようです。
Used for starting Android marker based profiling tool.
引用：https://www.tutorialspoint.com/react_native/react_native_debugging.htm
なお、予め以下のようにコード内に埋め込んでおく必要があるようです。
// SEE: https://facebook.github.io/react-native/docs/performance.html
// SEE: https://facebook.github.io/react-native/docs/systrace.html
require.Systrace.beginEvent = (message) => {
if(message.includes(problematicModule)) {
throw new Error();
}
} こちらも詳細は別記事にしたいと思います。
「Hot Reload」は、アプリの状態を維持した上でJSコードの変更が反映されます。いちいち初期画面に戻されることもありませんので、とても重宝する機能ではないかと思います。
「Toggle Inspector」は、UIパーツの調査に最適なツールです。ボタンやテキストなどの、マージンやパディング、要素そのもののサイズなどを調査することができます。
パフォーマンスモニタを、それぞれアプリの画面上に表示します。メモリ使用量などが分かります。
これで開発における準備は整ったかと思います。次回は画面遷移やViewの配置など、アプリケーション開発の基本的な処理を実装していこうと思います。