[typescript, react native]React Navigation画面遷移サンプルアプリのひな形作成手順

 備忘録として、

React Navigation画面遷移ライブラリの環境構築の方法を記載する。

■前提条件

・nodejsがインストールされていること

・Expo-CLI が事前にインストールされていること

>npm install -g expo-cli

1./サンプルプロジェクトを作成する

> npx expo init react-navigation-sample

2.「react-navigation-sample」フォルダに移動する

> cd react-navigation-sample

3.React Navigationのコアライブラリをインストールする

> npm install @react-navigation/native

4-1.stackを使う場合、statckをインストールする

> npm install @react-navigation/stack

4-2.bottom-tabsを使う場合、bottom-tabsをインストールする

> npm install @react-navigation/bottom-tabs

4-3.drawerを使う場合、drawerをインストールする

> npm install @react-navigation/drawer

5.react-native-paperをインストールする

npm install react-native-paper

6.React Navigationの依存ライブラリをインストールする

> npx expo install react-native-gesture-handler react-native-reanimated react-native-screens react-native-safe-area-context @react-native-community/masked-view

[typescript,WebAPI,サンプルコード]DeepLのWebAPIを呼び出すTypeScriptのサンプルコード

import fetch from "node-fetch";

// DeepL WebAPI URL
const URL_API = "https://api-free.deepl.com/v2/translate?auth_key=";

//DeepLのAPIキーを設定 ※各自のAPIキーで書き換え
const apiKey = "xxxxxx-xxxxxx-xxxxxx-xxxxxx-xxxxxx:fx";

// 翻訳対象言語
enum TARGET_LANG {
  Ja = "JA", // 日本語に翻訳
  En = "EN", // 英語に翻訳
}

// DeepLのWepAPIにRESTで翻訳依頼する
const executeTranslation = async (
  targetText: string,
  targetLang: TARGET_LANG
) => {
  //APIリクエストのGET時に必要なパラメータを設定
  const requestUrl =
    URL_API + apiKey + "&text=" + targetText + "&target_lang=" + targetLang;
  const response = await fetch(requestUrl);
  console.log("response", response);
  const json = await response.json();
  console.log("json", json);
  return json;
};

// WebAPIの返り値（JSON）をこっち側のクラスに変換する変換するためのType
type Translation = {
  detected_source_language: string;
  text: string;
};
type TranslationResult = {
  translations: Translation[];
};

const main = async () => {
  const result: TranslationResult = await executeTranslation(
    "This is translation test.",
    TARGET_LANG.Ja
  );
  console.log("英語から日本語への翻訳：result", result);
  console.log(
    "英語から日本語への翻訳：detected_source_language",
    result.translations[0].detected_source_language
  );
  console.log("英語から日本語への翻訳：text", result.translations[0].text);

  const result2: TranslationResult = await executeTranslation(
    "これは翻訳テストです。",
    TARGET_LANG.En
  );
  console.log("日本語から英語への翻訳：result", result2);
  console.log(
    "日本語から英語への翻訳：detected_source_language",
    result2.translations[0].detected_source_language
  );
  console.log("日本語から英語への翻訳：text", result2.translations[0].text);
};

main();

[npm, typescript]TypeScriptのインストールから実行まで

 ■前提条件

VSCodeをインストールする

■手順

1.npm init

2.npm install typescript

3.npx tsc --init

4.npx tsc

[typescript, react native]React Native Expo でapkファイルを作成する

 備忘録になる

■前提条件

React Native Expoアカウントを作成する

https://expo.dev/

■手順

1.Expo プロジェクトを作成する

>expo init build-sample

2. プログラミング言語を選択する

 .blank (TypeScript)

3.「expo build:android」を実行する

> npx expo build:android

4.Androidパッケージ名を決める

> What would you like your Android package name to be?

> com.example.myapp

5.ビルドタイプを決める

> Choose the build type you would like: 

> apk

6.KeyStoreを指定する

>? Would you like to upload a Keystore or have us generate one for you?

>If you don't know what this means, let us generate it! :) »

>Generate new keystore

7.expo-updatesのインストール

>In order to publish an update, expo-updates needs to be installed. Do you want to install it now? 

>Y

8.ビルドが成功したことを確認する

>Successfully built standalone app

9.apkダウンロードのURLが通知される。