Photosynthesic blog

React Native で遊んでみよう

2018-09-03

こんにちは、みみです。

去年からこそこそ 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>

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

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

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

この記事を書いた人

mimi

主に書いている人。愚痴が多いです。悲観的。 フロントエンド側のアレコレをイジるのが好きみたいです。 編み物と写真と珈琲とオヤツ作りが趣味。 イラストも、最近描いてないけど描きます。 Twitter