ホーム » React Native チュートリアル » React Native はじめてのアプリ

React Native はじめてのアプリ

概要: このチュートリアルでは、初めてのReact Nativeアプリ「Hello World」を作成する方法を学習します。

前提条件

このチュートリアルでは、React Native開発環境のセットアップが完了し、Expo Goアプリがスマートフォンにインストール済みであることを前提としています。

新しいReact Nativeプロジェクトの作成

create-expo-appコマンドを使用して、新しいExpoおよびReact Nativeプロジェクトを作成します。このcreate-expo-appツールを使用すると、テンプレートを使用してプロジェクトをすばやく初期化できます。

ステップ1. ターミナルを開き、以下のコマンドを実行して、helloworldという名前の新しいプロジェクトを作成します。

npx create-expo-app helloworld --template blankCode language: plaintext (plaintext)

このコマンドでは

  • create-expo-appコマンドは、プロジェクト用のhelloworldディレクトリを作成します。
  • --template blankオプションは、コマンドに必要なパッケージをすべてインストールし、空のReact Nativeプロジェクトを初期化することを指示します。

ステップ2. プロジェクトディレクトリに移動します

cd helloworldCode language: plaintext (plaintext)

ステップ3. 次のコマンドを使用して、ターミナルからアプリを実行します

npm startCode language: plaintext (plaintext)

npm startは、アプリを実行するnpx expo startコマンドを実行します。以下の出力が返されます。

React Native Hello World - Expo

QRコードは異なる可能性があります。

ステップ4. QRコードをスキャンして、スマートフォンでアプリを起動します。

内蔵カメラを使用してQRコードをスキャンすると、Expo Goがスマートフォンでアプリを開きます。スマートフォンに次のメッセージが表示されます。

Open up App.js to start working on your app!Code language: CSS (css)

Hello Worldアプリ

ステップ1. お好みのコードエディタを使用してプロジェクトディレクトリを開きます。

ステップ2. App.jsファイルを開き、コードを以下のように変更します。

import { View, Text, StyleSheet } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 40,
  }
});
Code language: JavaScript (javascript)

出力

動作原理

まず、`react-native`ライブラリから`StyleSheet`、`Text`、`View`をインポートします。

import { View, Text, StyleSheet } from 'react-native';Code language: JavaScript (javascript)

この構文では、`react-native`ライブラリから3つのオブジェクトをインポートします。

  • Viewは、ユーザーインターフェース（UI）を構築するためのReact Nativeの基本コンポーネントです。ViewはHTMLのdiv要素のように機能し、他のコンポーネントをラップするためのコンテナとして機能します。内部的には、React NativeはViewコンポーネントをAndroid（android.View）とiOS（UIView）のネイティブビューに直接変換します。
  • Textは、テキストを表示するためのコアコンポーネントです。
  • StyleSheetは、CSSスタイルシートのように機能するオブジェクトを作成します。

次に、JSXの一部を返し、デフォルトエクスポートを使用してエクスポートするAppコンポーネントを作成します。

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Hello, World!</Text>
    </View>
  );
}Code language: JavaScript (javascript)

Reactと同様に、React Nativeのコンポーネントは、関数であり、いくつかのJSXを返します。

この例では、App関数は、テキストHello, World!を含むTextを含むViewを返します。ViewとTextコンポーネントの両方に、stylesオブジェクトからの値を受け取るstyleというプロパティがあります。

第三に、StyleSheetのcreate()関数を使用してstylesオブジェクトを定義します。

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  text: {
    fontSize: 40,
  }
});Code language: JavaScript (javascript)

create()関数では、CSSのように機能するJavaScriptオブジェクトの値を持つcontainerとtextの2つのプロパティを持つオブジェクトを定義し、コンポーネントのルックアンドフィールを定義します。

  • containerプロパティは、flex: 1、justifyContent: center、alignItems: centerを使用して子コンポーネントを中央（この例では画面の中央）に配置します。
  • textプロパティは、フォントサイズを40に指定し、Textコンポーネントのフォントサイズを40に設定します。

ファイルを保存してExpo Goを開くと、スマートフォンに瞬時に表示されます。メッセージは次のように変更されます。

Hello, World!

この機能はホットリロードと呼ばれ、開発を高速化し、コードを変更してアプリのUIの変更を瞬時に確認できます。

まとめ

  • npx create-expo-app project-name --template blankを実行して、project-nameという名前のReact Nativeプロジェクトを作成します。
  • npm startを実行してアプリを起動し、QRコードをスキャンしてExpo Goアプリを使用してスマートフォンでアプリを起動します。
このチュートリアルは役に立ちましたか？
Setting Up React Native Development Environment
前へ
React Native開発環境のセットアップ
次へ
React Native Text
React Native Text