React Native チュートリアル

React Nativeを使用すると、JavaScriptを使用してクロスプラットフォームのモバイルアプリケーションを開発できます。このチュートリアルシリーズでは、React Nativeを使用して、次の素晴らしいモバイルアプリケーションを作成する方法を学びます。

学習内容

  • React Nativeを使用して、実世界のモバイルアプリを構築します。
  • 再利用可能なコンポーネントを開発します。

前提条件

  • 基本的なReact.
  • モバイルアプリをテストするためのAndroid携帯またはiPhone。

セクション1. React Nativeの始め方

  • React Nativeとは – React Nativeの概要と、クロスプラットフォームモバイルアプリを開発するためにReact Nativeを使用する理由について説明します。
  • React Native開発環境のセットアップ – ExpoとExpo Goをすばやくセットアップして、すぐにReact Nativeの開発を開始する方法を示します。
  • React Native Hello World – Hello Worldという最初のReact Nativeアプリケーションを作成する方法と、アプリの構造について学びます。

セクション2. Text、SafeArea、ScrollViewコンポーネント

  • Text – Textコンポーネントを使用して、モバイルアプリにテキストを表示する方法を示します。
  • SafeAreaView – SafeAreaViewコンポーネントを使用して、デバイスの安全な境界内にネストされたコンポーネントをレンダリングします。
  • ScrollView – アプリでスクロール可能なコンテンツを作成します。

セクション3. FlatListおよびSectionListを使用したリストのレンダリング

  • FlatList – 大量のアイテムのリストを効率的に表示します。
  • SectionList – セクションヘッダー付きの大規模なリストをレンダリングします。

セクション4. TextInput、KeyboardAvoidingView、Pressable、Switch、Image

  • TextInput – さまざまなキーボードタイプを使用して、テキスト入力フィールドを作成する方法を学びます。
  • KeyboardAvoidingView – KeyboardAvoidingKeyコンポーネントを使用して、仮想キーボードが表示されている間、ネストされたコンポーネントを表示し続けるためにプロパティを自動的に調整する方法を示します。
  • Pressable – Pressableを使用して、アプリにタッチインタラクティビティを作成します。
  • Switch – トグルスイッチを作成します。
  • Image – アプリにローカルまたはリモートの画像を表示します。

セクション5. レイアウト

  • Flexbox – Flexboxレイアウトを使用してモバイルアプリにコンポーネントを配置する方法を学びます。
  • ポジショニング – 相対的および絶対的なポジショニングを使用して、画面上のコンポーネントを配置する方法を学びます。

セクション6. フック

  • useWindowDimensions – useWindowDimensionフックを使用して、幅と高さを含む現在のウィンドウの寸法を取得する方法を示します。
  • useColorTheme – useColorThemeフックを使用して、現在のユーザーが優先するカラースキーマ(ダークまたはライト)を取得する方法を学びます。

セクション7. React Navigation

このセクションでは、画面間を移動するためのスタックナビゲーション、ボトムタブナビゲーション、ドロワーナビゲーションを含むナビゲーションを設定する方法を学びます。

  • スタックナビゲーション – React Navigationをセットアップし、画面間を前後に移動できるスタックナビゲーターを作成します。
  • ボトムタブ – ボトムタブナビゲーターを使用してボタンタブを作成します。
  • ドロワー – ドロワーナビゲーターを使用してドロワーを作成します。
このチュートリアルは役に立ちましたか?