【React Native入門】Hello Worldを表示するプログラムの作り方を解説

React Nativeの開発環境構築が完了すると、プロジェクトのApp.jsには、あらかじめ以下のようなデフォルトコードが用意されています。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
               <Text>Open up App.js to start working on your app!</Text>
               <Text>Changes you make will automatically reload.</Text>
               <Text>Shake your phone to open the developer menu.</Text>
             </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

このコードは自由に書き換えることができます。本記事では、アプリの画面に「Hello World」というテキストを表示することを目標に、コードの書き方を順番に解説していきます。

必要なコンポーネントをインポートする

まずは、コードで使用するコンポーネントやモジュールをインポートします。React本体のモジュールは必須なので、最初に以下のように読み込みましょう。

import React from 'react';

続いて、「Hello World」を表示するために使用するコンポーネントをreact-nativeからインポートします。

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

ここではStyleSheet・Text・Viewの3つのコンポーネントをインポートしています。それぞれの役割は以下のとおりです。

• StyleSheet：ViewやTextなどのコンポーネントにスタイルを適用するために使います。
• View：UIの土台となる親コンポーネントで、他のコンポーネントを内包します。
• Text：画面に文字列を表示するための子コンポーネントです。

デフォルトのAppクラスを確認する

Appクラスはデフォルトでエクスポートされる、アプリのエントリーポイントとなるクラスです。プロジェクトを実行すると、<Text>コンポーネント内に記述したテキストがデバイス画面に表示されます。

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
               <Text>Open up App.js to start working on your app!</Text>
               <Text>Changes you make will automatically reload.</Text>
               <Text>Shake your phone to open the developer menu.</Text>
             </View>
        );
    }
}

テキストを「Hello World」に変更する

<Text>コンポーネントの中身を、以下のように「Hello World」へ書き換えます。

export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
               <Text>Hello World</Text>
             </View>
        );
    }
}

スタイルを適用して見た目を整える

Viewコンポーネントにはstyleというpropsが指定されており、その値としてstyles.containerが渡されています。propsに変数やオブジェクトを渡す場合は、波括弧{}で囲む必要がある点に注意してください（例：style={styles.container}）。

stylesオブジェクトはStyleSheet.create()を使って定義します。各コンポーネントへのスタイル定義は、すべてこの中にまとめて記述するのが基本です。ここでは、Viewコンポーネントに適用するcontainerスタイルに加えて、Textコンポーネント用のforTextスタイルも追加してみましょう。

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    forText: {
        color: 'green',
        fontSize: 25
    }
});

なお、React NativeではfontSizeに数値を直接指定します。WebのCSSのように「25px」といった単位付きの文字列は使えないため、注意してください。指定した数値はdp（密度非依存ピクセル）として扱われます。

完成版コード

以上をすべて組み合わせると、React Nativeでモバイル画面に「Hello World」を表示できる完全なコードは以下のようになります。

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
export default class App extends React.Component {
    render() {
        return (
            <View style={styles.container}>
               <Text style={styles.forText}>Hello World</Text>
             </View>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
    forText: {
        color: 'green',
        fontSize: 25
    }
});

補足：アプリの起動方法

AndroidエミュレーターやiOSシミュレーターで動作を確認する場合は、プロジェクトのルートディレクトリで以下のコマンドを実行します。コードを保存すると変更内容が自動的に再読み込みされるため、編集しながらすぐに結果を確認できます。

npx react-native run-android
# または
npx react-native run-ios

実行結果

コードを保存してアプリを起動すると、白背景の画面中央に、緑色の「Hello World」というテキストが表示されます。