Articles

最初のReact Native Androidアプリを作成する

by admin

React NativeはFacebookによって作成されたオープンソースのモバイルアプリケーションフレームワークです。 これを使用して、単一のコードベースでAndroidおよびiOSデバイス用のアプリケーションを開発できます。 React NativeはInstagramやFacebookなど、世界で最も人気のあるアプリのいくつかを強化しています。この記事では、Android用の最初のReact Nativeアプリを作成する方法を紹介します。…………instagram

React Nativeコードの例

一般的なモバイルアプリ画面のReact Nativeコードは次のようになります:よく見ると、React NativeはJavaScript、HTMLのようなマークアップ、およびCSSの組み合わせを使用していることがわかります。 このコードスニペットは、テキストの表示とスタイルを持つ画面を定義します。

React Native開発環境：ExpoとReact Native CLI

React nativeアプリを作成するには2つの方法があります。

  1. Expo CLI
  2. React Native CLI

Expo CLI

Expoは、オープンソースのフレームワークであり、管理されたアプリ開発ワークフローを提供するuniversal React applicationsのプラットフォームです。 これは、同じJavaScriptまたはTypeScriptコードベースからiOS、Android、およびwebアプリの開発、構築、デプロイ、および迅速な反復を支援する、React Nativeおよびネイティブプラットフォームを中心に構築されたツールとサービスのセットです。

Expoは、React Nativeアプリの構築に関連するすべての複雑さを取り除きます。 Expo CLIの機能には、次のものがあります。:

  • カメラ、マップ、通知、センサー、触覚などの機能へのアクセスを提供するユニバーサルApi。
  • アプリストア対応のバイナリを提供し、証明書を処理するクラウドベースのビルドサービス。
  • あなたが店に提出する手間と遅延なしに、いつでもあなたのアプリを更新できるように無線アップデート。

React Native CLI

React Native CLIは、より基本的でベアメタルな開発環境です。 良いことは、クラウドサービスに頼ることなく、自分のマシン上でアプリのバイナリを構築することが可能になるということです。 一方、設定ははるかに複雑です—Android用のアプリを構築するには、開始する前にAndroid Studioをインストールし、多くの機能を構成する必要があります。 このプロセスは少し複雑になる可能性がありますが、React Native CLI環境はプロのアプリ開発者に適しています。このチュートリアルでは、React Nativeアプリの構築を開始する最も簡単な方法であるExpoを使用します。

Expoの仕組み

Expo

Expoを使用するには、最初にPlayストアで利用可能なExpoクライアントアプリをイ Expoクライアントアプリを使用すると、リアルタイムでテスト目的のためにアプリを実行することができます。お気に入りのプログラミングテキストエディタを使用して自分のコンピュータ上でReact Nativeアプリをコード化し、Expo CLIを使用してアプリをテストまたは公開 舞台裏では、ExpoはReact Nativeコードをパッケージ化し、デバイス上のExpoクライアントアプリで利用できるようにします。 また、Expo CLIを使用して、アプリを公開してExpoクライアントを持つすべてのユーザーが利用できるようにしたり、App storeにアップロードしてExpoクライアントをイ

Expoを使用したアプリの作成

このチュートリアルでは、Expo CLIを使用してアプリを作成します。 ExpoでReact Nativeアプリを作成するには、次の条件を満たす必要があります。

  • ノード。jsバージョン12LTS以上およびコンピュータ上のGit
  • Lollipop(Android5)以上のAndroidデバイス
  • AndroidデバイスにインストールされているExpoクライアントアプリケーション(PlayストアからAndroid用Expoクライアントをダウンロード)
  • ReactJSまたはJavaScriptの基本的な理解

また、開発用コンピュータと携帯電話は同じワイヤレスネットワークに接続されている必要があります。

ノードをダウンロードします。js

ノードを訪問します。jsのウェブサイトとノードの最新バージョンをダウンロードします。 ノードは、Windows、macOS、およびLinuxオペレーティングシステムで使用できます。 単にあなたのオペレーティングシステムを選択し、サイト上で利用可能な指示に従ってインストールします。

ノードかどうかを確認します。jsがインストールされ、ターミナルウィンドウを開き、次のように入力します。

node -v

このコマンドは、インストールされているノードのバージョNodeをインストールした後は、Expo CLIクライアントもインストールする必要があります。 次のコマンドを実行するだけです。

 npm install expo-cli --global

macOSおよびLinuxユーザーの場合は、sudoを使用していることを確認してください。

sudo npm install expo-cli --global

Expo CLIのインストールプロセスで発生する警告またはエラーを無視します。 インストールが成功すると、以下のメッセージが表示されます。

expoをインストール

React NativeでTo-Doリストアプリを作成

私たちは、あなたが完了するために必要なタス

Expoを使用して新しいプロジェクトを作成する

開始するには、次のExpo CLIコマンドを実行して新しいプロジェクトを作成します:p>

expo init tasklist

tasklistプロジェクトの名前です。 プロジェクトのテンプレートを選択するように求められます。 今のところ、あなたに最小限の依存関係を与える空白のテンプレートを選択してください。

expo initコマンドはプロジェクトフォルダを作成し、React Nativeアプリに必要なすべての依存関係をインストールします。

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

プロジェクトフォルダに移動し、次のコマンドを実行します:P>

cd tasklist-appnpm start
Expo dev tools starting

npm startExpo dev toolsを起動し、ブラウザで新しいタブを開きます。このように：

metro bundler

このウィンドウでは、シミュレータまたは接続されたデバイス上でアプリを実行

デバイスを接続

次に、物理的なAndroidデバイスでExpoクライアントアプリを開き、以下に示すようにQRコードをスキャンオプションを選択します。

expoアプリ

次に、Expo devウィンドウに戻り、バーコードをスキャンして、JavaScriptバンドルビルドプロセスが完了するのを待ちます。 これには通常数分かかります。 プロセスが完了すると、アプリケーションは、お使いの携帯電話上で実行されている必要があります！

プロジェクト構造

開発環境の準備ができたので、お好みのコードエディタを使用してプロジェクトのコードを編集できます。 プロジェクトフォルダは次のようになります:

プロジェクトフォルダ
  • アセット：アプリの画像を保持します
  • node_modules：プロジェクトのすべての依存関係が含まれています
  • アプリ。js:UIをレンダリングするコードを保持し、不可欠なファイル

アプリです。jsは上のスクリーンショットで開いています。 詳しく見てみましょう。 まず、ReactreactTextViewreact-nativeStylesheetもインポートします。 React Nativeには、<Text><View><div><p>のような標準的なHTMLコンポーネントとは対照的に。 <View>コンポーネントはReact Nativeの最も基本的なコンポーネントであり、HTMLの<div>のように、他の子コンポーネ Htmlの<p><Text>コンポーネントは、画面にテキストコンテンツを表示するために使用されます。

アプリの定型版で。Expoが作成するjsには、テキストコンポーネントとステータスバーを持つ単純なビューがあります。 このビューは、App()styles定数には、ビューのスタイルを設定するための基本的なCSSが含まれています。

次に、アプリにいくつかの新しいコンポーネントとスタイルを追加しましょう！

アプリのUIを作成します

アプリを開きます。jsファイルを開き、次のコードを入力します。上記のコードは、単純なテキスト入力と新しいタスクを追加するためのボタンを追加します。

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

上記のコードは、単純なテキスト入力 CSS flexboxスタイルを使用して、コンポーネントを隣に配置します。 ユーザー入力を取得するには、まずuseState()reactnewTask()setnewTask()App()return:

const = useState('');

次に、入力の変更をリッスンし、taskInputHandlertaskInputHandlersetNewTask()関数。 次の行をApp()関数に追加します。

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

この入力ハンドラをTextInputTextInputコンポーネントを更新します。p>

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

今、私たちは、ボタンの押下を処理する必要があります。 ユーザーが+ボタンを押すと、新しいタスクをリストに追加します。

まず、タスクのリストの状態を定義します。

 const = useState();

次に、新しいタスク（newTaskaddTaskHandler関数を定義します。p>

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

そのイベントハンドラを<Button>コンポーネントに登録します:

 <Button title = "+" onPress = {addTaskHandler} />

最後に、作成したリスト内のすべてのタスクを表示するための新しいビューを追加します。 これは、入力コンテナビューの直後に行われますが、メインコンテナビューの中にあります。P>

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

アプリの完全なソースコード。js

アプリの完全なコード。jsを以下に示します。 あなたが持っているものと比較してください。このチュートリアルでは、Expoを使用してReact Nativeアプリを作成する方法を学びました。

React Nativeは素晴らしいフレームワークであり、開発者と企業の両方にとって人気のあるプラットフォームです。 React Nativeで作成されたアプリは、どのプラットフォームやシステムでもスムーズに動作することが保証されています。 また、React Nativeは、アプリを一度コーディングして任意のモバイルプラットフォーム上で実行できるようにすることで、開発作業を節約します。

Codecanyonのプレミアムモバイルアプリテンプレート

CodeCanyonは、Android、iOS、React Native、Ionic用の何百ものモバイルアプリテンプレートを持つオンラインマーケットプレイスです。 あなたはそれらのいずれかを使用することにより、努力の日、さらには月を、保存することができます。

React Nativeを使い始めたばかりの方でも、経験豊富な開発者でも、React Nativeアプリテンプレートは、次のアプリプロジェクトの時間と労力を節約するのに素晴ら

CodeCanyonモバイルアプリのテンプレートのベストセラー

CodeCanyonのどのテンプレートがあなたのために右であるかを決定するのに苦労している場合は、これらの記事が役立つはずです:

  • Mobile App
    21+ Best React Native App Templates of 2021 (Including 5 Free)
    Franc Lucas
  • Ionic
    15 Stunning Ionic App Templates and Ionic Themes
    Franc Lucas
  • React
    9 React Native App Templates for You to Study and Use
    Franc Lucas