この記事は ウェブクルー Advent Calendar 2018 10日目の記事です。
昨日は @wc-takahara さんの「 GoogleAPIを初心者が使ってみて～ランニングコース生成編～ 」でした。
はじめに
最近、社内でReact Nativeの勉強会が始まりました！
とりあえず何かしらコードを書いてみたいけど、とてつもなく面倒くさがりな私は(フロントエンドとしてどうなの…)
環境構築めんどくさいな〜HelloWorldまでが長いんだよな〜億劫だな〜と思いながら色々調べていて、見つけました。
こんな私にピッタリのサービスを！
本記事では主に登録方法や使い方についてお伝えしたいと思います。
＜対象者＞
-
環境構築めんどくさいと思いながらとりあえず簡単なものをサクッと試したい方 - npm とかちょっとよく分からないけどReactNativeやってみたい方
- 次やる案件がReact Nativeだからアサイン前に軽く触れたい方
そもそもExpoとは
React NativeでiOSやAndroindのビルドを支援するサービスです。
Expo Snack とは
ブラウザ上でコードの動作を確認できるサービスです。
codepen や CodeSandbox ような感じ
Expo Snackに登録する
expo公式のトップ にアクセス！
右上のcreate an accountにてアカウント登録を行います。
登録が完了したらログインしてGet Startedを押下し、
こちら に遷移するので、スクロールしてちょっと下の方にあるTry Expo in the browserのOpen Snackを押下。
すると Expo Snack の画面になります！
試してみる
Snackは開くたびに新規でランダムでサンプルコードが出てくるっぽいです。
とりあえずお決まりのHello World 書いてみましょう！
下記の部分を変えるだけです。Change〜の英文を変えてみてください。
<Text style={styles.paragraph}>
Change code in the editor and watch it change on your phone! Save to get a shareable url.
</Text>
↓↓↓
<Text style={styles.paragraph}>
Hello World
</Text>
実機で見てみる
実機で見るにはiOSまたはAndroidにExpoのアプリをインストールします。
右上のRunを押下し、出てきたモーダルのQR Codeを選択していただければQRが出てきます。
QRをスキャンしてアプリで開くと、リアルタイムでSnackのコードを実機で確認できます！すごい！
簡単なコードの説明
App.js
// 使いたい機能を取得
// reactからReactとComponentをインポートする
import React, { Component } from 'react';
// react-nativeから使いたい標準コンポーネントをインポートする
import { View, Text, StyleSheet } from 'react-native';
// クラス作成
export default class App extends Component {
// 画面描画
render() {
return (
// div的な。注意としては中にテキストを書くことはできず、本当にただの入れ物
// style={styles.hogehoge} クラス名的な
<View style={styles.container}>
// span的な。テキスト描画には必ずTextで囲う。
<Text style={styles.text}>Hello world!</Text>
<View>
);
}
}
// スタイル定義
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
text: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
});
その他は ドキュメント を読んでみて試してみてください！
まとめ
いかがでしたか？短時間で、簡単にReact Nativeに触れることができました。
どんどんSnackでサンプルを作成して、素敵なアプリを作っていきましょう！
快適開発ライフを〜
最後に
明日は wc-kobayashiT さんです。よろしくお願いいたします！
ウェブクルーでは一緒に働いていただける方を随時募集しております。
お気軽にエントリーくださいませ。