EXPO+ReactNativeでの新規プロジェクトの作り方が3年前に調べた時と変更になっている。

npx create-expo-app xxxxxxx(プロジェクト名)xxxxx

で現在のフォルダにプロジェクト名のフォルダが出来て中に開発環境が出来る。このコマンドを実行するにはネット接続が必要。そして空のプロジェクトでもファイル数2万、フォルダ数4000、合計容量200MBがコピーされる。なんて無駄な・・・出来上がりのテンプレートアプリのapkファイルが80メガバイトあるはずだ・・・

オプション無しで新規プロジェクトを作ると色々とタブ構造によるメニューとか色々と入ったt年プレートの空プロジェクトが出来てしまうので

npx create-expo-app xxxxxxx(プロジェクト名)xxxxx --template blank

として作ると実行時1画面のapp.jsのみのシンプルなプロジェクトが作成される。

import React, { useState, useEffect } from 'react';
import { Text, View, StyleSheet } from 'react-native';
import * as Location from 'expo-location';

export default function App() {
  const [location, setLocation] = useState(null);
  const [errorMsg, setErrorMsg] = useState(null);

  useEffect(() => {
    (async () => {
      // 1. 位置情報の使用許可をリクエスト
      let { status } = await Location.requestForegroundPermissionsAsync();
      if (status !== 'granted') {
        setErrorMsg('位置情報の使用許可が拒否されました。');
        return;
      }

      // 2. 現在位置を取得
      let currentLocation = await Location.getCurrentPositionAsync({});
      setLocation(currentLocation);
    })();
  }, []);

  let text = '取得中...';
  if (errorMsg) {
    text = errorMsg;
  } else if (location) {
    text = `緯度: ${location.coords.latitude}\n経度: ${location.coords.longitude}`;
  }

  return (
    
      {text}
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  paragraph: {
    fontSize: 18,
    textAlign: 'center',
  },
});

最初に

npx expo install expo-location

でexpo-locationをインストールするのが必要。上記でアプリに位置情報の取得権限も撮ってくれる。useEffetとかasyncとかが入力待ち？よく分からん。
これは起動時に一度だけ取得してもう変更されないんだよね？未確認。結論としてeas.jsonにbuildtypeをきちんと記載しておいて

eas build --platform android --profile development

とするとapkファイルが出来る。

Category:Androidアプリ製作