javascriptでiosアプリやAndroidアプリが作れるReactNative。
そんな便利ツールを使って、今回は簡単にiphoneアプリを作る方法をみなさんにご紹介します。チュートリアル形式で解説していきますので、一緒にネイティブアプリを作ってみましょう！
※ReactNativeを使うために必要な環境構築はこちらの記事で解説しています。
まずはCLIをつかって準備完了
|
1 |
react-native init プロジェクト名 |
|
1 2 3 |
cd プロジェクト名 npm i |
|
1 |
react-native run-ios |
うまく、起動できれば、以下の画面が現れます。(初回起動のみ、時間がかかるので、気長に待ちましょう)
これにて、準備完了です。実際のコードを触っていきましょう。
ディレクトリやファイル
|
1 2 3 4 5 6 7 8 9 10 |
├── App.js ├── __tests__ ├── android ├── app.json ├── index.js ├── ios ├── node_modules ├── package-lock.json ├── package.json └── yarn.lock |
そして、ここに「src」というフォルダを新規作成して、srcフォルダの中でアプリに使うファイルを作成していきます。
※Web版のReactやVue.jsを使ったことがあると、同じような使い方だと気づくはず！
|
1 2 3 4 5 6 7 8 9 10 11 |
├── App.js ├── __tests__ ├── android ├── app.json ├── index.js ├── ios ├── node_modules ├── package-lock.json ├── package.json ├── src └── yarn.lock |
srcフォルダを追加するとこんな感じ。(srcが増えただけですね！)
親Componentを作る
ReactやReactNative、Vueなどのデータバインディング系のフレームワークはコンポーネント指向と呼ばれていて、サイトやアプリのパーツをコンポーネントという小さな単位に切り分けて、それらを組み立ててプロダクトを作っていきます。
この図のように、まずは親となるパーツ(Component)を作成して、その中に子供となる子Componentをいくつもいれてアプリを作っていきます。
ReactNativeにおいて、大元の親Componentとなるのは、上記で説明したファイル構成の中の「index.js」です。まずは、このindex.jsの中身を
|
1 2 3 4 5 6 7 8 |
import React from 'react'; import { Text, AppRegistry } from 'react-native'; const App = () => ( <Text>Hello World!</Text> ); AppRegistry.registerComponent('test', () => App); |
に変更してください。
- 1〜2行目で、ReactとReactNativeをimportしています。(そういうものだと覚えてください)
- 4〜5行目で、Appという親Componentを作成しています。このAppの中に子Componentをいれてアプリを作っていきます。
- 5行目の<Text>は、文字列を表示させたいときに使うタグで、HTMLの<p>のようなものと覚えてください。ただ、ReactNativeの場合は、タグを使う場合、ReactNativeライブラリからimportする必要があります(2行目)
- 8行目はおまじないだと思って、とりあえず書いておきましょう。
以上のソースを記述して、simulatorをリロード(Command + R)すると、
このように画面が更新されます！
styleが聞いてないので、<Text>で囲った文字が左上に行ってしまっていますが、いまは気にしなくて良いでしょう。
子Componentを作る
親Componentの作成と描写に成功したので、次は子Componentの作成にうつりましょう。まずは、ヘッダー部分を表示するComponentを作成します。
srcディレクトリの中に、Header.jsというファイルを作成して、
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import React from 'react'; import { Text, View } from 'react-native'; const Header = () => { const { headerText, header } = styles; return ( <View style={header}> <Text style={headerText}>ヘッダー</Text> </View> ); }; const styles = { header: { backgroundColor: '#F8F8F8', justifyContent: 'center', alignItems: 'center', height: 60, paddingTop: 15, elevation: 2, position: 'relative' }, headerText: { fontSize: 20, fontWeight: '600' } }; export default Header; |
と記述してください。これが、ヘッダー部分を表示するヘッダーComponentになります。やっていることは、index.jsの親コンポーネントとほとんど同じなのですが、
- stylesというオブジェクトを作成して、そのオブジェクトの中身のstyleをViewやTextといったタグに適用している(HTMLとCSSのコーディングとほぼ同じです。)
- 最後にHeaderをexport defaultして、親Componentでimportして使えるようにしている。
という2点が、index.jsと異なります。
子Componentをimportする
いま作成したヘッダーComponentをindex.jsでimportして使いましょう。
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import { View, AppRegistry } from 'react-native'; import Header from './src/Header'; const App = () => ( <View> <Header /> </View> ); AppRegistry.registerComponent('test', () => App); |
index.jsに Headerコンポーネントをimport(3行目)して、<Header />という記述で描写します。
この状態で、Simulatorをリロードすると、
このように、アプリにヘッダーが描写されました！
こういった具合に、親コンポーネントが子コンポーネントをimportして、ブロックを組み立てるようにアプリを作っていくのがReactNativeによるアプリ制作です。
アプリ制作って難しそうなイメージがありますが、意外と簡単そうじゃないですか？
親コンポーネントから子コンポーネントにパラメーターを渡す
最後に親から子供にパラメーターを渡す方法を紹介します。
まずは、親コンポーネントに渡したいパラメーター名と、その値を記述します。(例：パラメーター名：showText, 値：RARA)
|
1 2 3 4 5 6 7 8 9 10 11 |
import React from 'react'; import { View, AppRegistry } from 'react-native'; import Header from './src/Header'; const App = () => ( <View> <Header showText={'RARA'} /> </View> ); AppRegistry.registerComponent('test', () => App); |
次に、子Componentでそのパラメータを受け取ります。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
.... const Header = (props) => { const { headerText, header } = styles; return ( <View style={header}> <Text style={headerText}>{props.showText}</Text> </View> ); }; ..... |
パラメータの受け取り方は、「アロー関数 () => {}」の引数にpropsと記述して(3行目)、パラメーターを表示したいところにパラメーター名を記述するだけ。今回でいうと、「props.showText」を今まで「ヘッダー」とべた書きしていた部分に記述するだけ(7行目)。
この状態で、リロードすると
パラメーターで渡した値(RARA)がヘッダーに表示されました！
まとめ
ReactNativeによるアプリ制作は、Componentという小さい単位のパーツを組み合わせていくだけ。非常にシンプルにアプリが作れるということで、FacebookアプリやInstagramアプリのような大手のアプリから、まだ創業間もないベンチャー企業のアプリまで、様々なアプリで実用化されています。
是非、あなたも、ReactNativeでアプリ制作ライフを楽しんでください！
引き続き、ReactNativeの記事を書いていきますので、お暇な時に見に来てくださいね！
※今回制作したファイル一式をgithubにあげておきましたので、興味ある人は是非😏(https://github.com/rara-tan/react-native-make-header)
