はじめに
ReactNativeでスマートフォンアプリを開発してみて色々感じたことやハマったことが沢山あったので、共有してみたいと思い記事を作成しました。
当方はアプリ開発やJavaSctiptに関しては初心者の部類に入るかと思いますので、ご了承のほどをよろしくお願いします。
また、プロジェクトの作成から実際のリリースまでの過程をご紹介させて頂きます。
注意
React Native 関連の技術は頻繁に更新されていますので、参考にならない部分もあります。
環境構築
- mac
- npm (v6.4.1)
- nvm (v0.33.8)
- node (v8.12.0)
- expo (v2.2.4)
nvmの導入
ReactNativeはnpmで各種ライブラリを管理します。
バージョンごとに管理したいので nvm を導入することをお勧めします。
引用元: nvm
curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash
HOME/.nvm にパスを通します
お使いのシェルのプロファイルに以下を追加します
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
nvm --version
0.33.8
これでnvmが利用可能になりました。
npmの導入
nvmにて安定したバージョンをインストールします
nvm install --lts
......
#Now using node v8.12.0 (npm v6.4.1)
一覧表示
nvm ls
-> v8.12.0
system
シェルが再起動するとsystemに戻るためエイリアスを指定して切り替えるのがオススメです。
nvm alias react-native v8.12.0
nvm use react-native
#Now using node v8.12.0 (npm v6.4.1)
Expo の導入
公式ドキュメント: expo
Expo とは環境構築を自動で行い、ストアに出すまでの工数を大幅に省略してくれるフレームワークです。手元の実機テストも簡単に行えます。XCodeを触りたくない人向け。
デメリットはネイティブ(通知, Wifiモジュールなど)関連の操作がExpoが提供しているAPIに限定されること。アプリの種類によっては相入れない場合があるので、Expoのドキュメントを確認してからの選択をおすすめします。
npmからインストール
npm install expo-cli --global
# + expo-cli@2.2.4
expo --version
# 2.2.4
プロジェクトを作成したいディレクトリで init します
blankかtabsを選択します。最初はblankで。
expo init your-project-name
# ? Choose a template:
❯ blank
# The Blank project template includes the minimum dependencies to run and an empty root component.
tabs
# The Tab Navigation project template includes several example screens.
init が終了後、プロジェクト名のディレクトリが生成されています。
移動して起動します。
cd your-project-name
expo start
QRコードが表示されれば起動成功です。
キーボードの i キーでiOSシミュレータが立ち上がり、初期画面が表示されます。
内容は App.js から読み込まれます。
環境構築はここまでです。色々試してみてください。
have a happy coding!