m_shige1979のささやかな抵抗と欲望の日々

プログラムの勉強をしながら学習したことや経験したことをぼそぼそと書いていきます

Github(変なおっさんの顔でるので気をつけてね)

https://github.com/mshige1979

react-nativeをexpoで作成

react-nativeをexpoで作成

概要

m-shige1979.hatenablog.comCLIを使用した環境設定はできた感じとしてexpoの場合はどんな感じなのか確認する。

expo.io

expo.io

アカウント作成

f:id:m_shige1979:20201004102451p:plain

アカウント作成後の画面

f:id:m_shige1979:20201004102816p:plain

ツールインストール

android studioxcodeをインストール

xcodeapple storeより android studioDownload Android Studio and SDK tools  |  Android Developersよりインストール ※一応いるのね・・・expo側でなんかいい感じにしてくれると思ってましたよ( ;∀;)

anyenvインストール

anyenv install --init
mkdir -p $(anyenv root)/plugin
git clone https://github.com/znz/anyenv-update.git $(anyenv root)/plugins/anyenv-update
anyenv update
anyenv install nodenv
exec $SHELL -l

nodenvインストール

nodenv install 14.11.0
nodenv global 14.11.0
node --version

npmよりexpoインストール

npm install expo-cli --global

アプリ作成

プロジェクト作成

npx expo init myapp1

※私の環境はzshなのでパスがうまく通らないのでnpx経由で起動

起動

cd myapp1
yarn start

f:id:m_shige1979:20201004105152p:plain

iosを選択

f:id:m_shige1979:20201004110736p:plain

※eset入れていたら19000〜19002あたり開けること

ソース改修

App.js

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text>hello world</Text>
      <StatusBar style="auto" />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

f:id:m_shige1979:20201004112208p:plain

基本的にソースを修正後に自動的に変更が反映される仕組みだが、 ポートを閉じていたりいたらうまく動作しないため、最初のうちはシミュレータを再度起動し直す必要があるかも

実機に入れるのは今後にする スマホアプリのexpo clientとかでどうにかするらしいが・・・

終わり