React Native で遊んでみよう


こんにちは、みみです。

去年からこそこそ React Native を触って、趣味のアプリを作ろうとしているのですがなかなか進まず。久しぶりに時間が空いたので触ろうとしたら、どっから始めるのかさえ忘れていたので忘備録的に書いておこうと思います。

まずはココから

Getting Started · React Native

1. インストール

Node.jsがすでにインストールされていれば、ターミナルで

npm install -g create-react-native-app

とすればダーッとインストールされていきます。

2. 新しいプロジェクトを作成

create-react-native-app LikeYourProjectName

で、新しいプロジェクトが生成されます。ちょっと待ちましょう。

3. もう動きます!

cd LikeYourProjectName

として、該当ディレクトリに移動後、

npm start

すると、もりもり動き出します。
かんたーん。

4. 実機またはシュミレーターで動作確認

 › Press a to open Android device or emulator, or i to open iOS emulator.
 › Press s to send the app URL to your phone number or email address
(以下略)

とか言ってくるので、aかiかsとか、お好みのキーを押して、シュミレーターを起動したり、実機確認ができます。(シュミレーター使うのには別途インストールが要るはず。)

実機確認には、Expo というアプリを使って出来るようになっています。これ便利だー。

今日の日付を出してみよう

これで、おもに App.js をあーだこーだすれば、アナタだけのアプリが作れます。

試しに、今日の日付を取得してみましょう。

//日付の取得
const today = new Date();
const year = today.getFullYear();
const month = today.getMonth()+1;
const date = today.getDate();

とか上のほうに書き足して、

4行目あたりから始まるレンダリングのところの中のViewタグ内を

<Text>
    {year}年{month}月{date}日
</Text>

と書き換えて、保存すると。

画面のスクリーンショット

という感じに日付が表示されます。やったね!


この記事を書いた人