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のみのシンプルなプロジェクトが作成される。
ミニマムプログラム例1（ボタンを押すと数字が増える）
- expo-status-barは使って無いし不要かもしれない。
- export default function App(){}ってのが起動時に1度だけ（繰り返し？）実行される部分らしい。
- useStateってのが変数を使うために必要なライブラリー？
- const[count, setCount]=useState(5)ってのでcountという変数が初期値＝5で作られるようだ、この言語ではcountを変更したい時はsetCountを呼び出す。残りのコードはJavaScriptっぽい。ボタンを押すとcountの値が1増えて、表示も変更される。
↓実行した画面
ミニマムプログラム例2（現在位置の経緯度を表示）
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とかが入力待ち？よく分からん。
- このサンプル2にはサンプル1にあった「expo-status-bar」がimportされてないので必須ではないっぽい。
- サンプルプログラム1に合ったuseStateに加え、useEffectってのがインポートされている。調べると今回の使い方では第二変数が[]なので起動時に1回だけ実行されるっぽい。これを引数無しにすると全ての再レンダリング後に実行したり、何かのトリガーがあるたびに実行したり出来るみたい。
- buildはeas loginして、eas buildってやると環境設定からbuildまでいっきにやるみたい。以前やっていたeas build:configureってやると環境設定のみを行う。ちなみにアプリIDは「com.fetuin.mynewproject4」みたいなのがついていた。Buildはクラウド上でやるらしく順番待ちがあると何十分も待たされる。
eas build --platform android --profile development
とするとapkファイルが出来る。
Category:Androidアプリ製作
■ ■ ■ コメント ■ ■ ■
いいっすね！=6
001 [12/23 15:36]通りすがりやん:スゴイ！昔の Android Studio とはだいぶ違うんだね。 ↑(1)
002 [12/23 18:45]j@BM:普通にAndroid studioでプレーンな環境で作らないのはなぜ？？ この方法は確かに簡単かもしれないけどいろいろ跳ね返り多そう ↑(1)
003 [12/23 20:53]F@Dion:ReactNativeは使ったことないけど作りたてのプロジェクトで80MBのapkになるの？でかすぎる…JAVAとかなら5MBくらいかなぁ？あとaabにならんの？ ↑(1)
本カテゴリーで直近コメントが書かれた記事
→カテゴリー：Androidアプリ製作(記事数:3)
本カテゴリーの最近の記事(コメント数)
