Angular 入門

ホーム > React Native > React Native 版の Hello, world

React Native 版の Hello, world

それでは、 React Native をはじめましょう。

まずは環境確認を兼ねて、Android 上の React Native 版ハローワールドを作りましょう。

$ react-native init myapp1

出力されるワーニング類を一応眺め、必要に応じて修正しましょう。

作成されたフォルダに移動して、react-native run-android コマンドを実行します。

$ cd myapp1
$ react-native run-android

この結果、Android 端末あるいはエミュレータ上で次の画面が表示されれば OK です。

少し書き換えてみましょう。

上で作成されたディレクトリ内に index.android.js がありますので、それを編集します。エディタ (Atom) で開いた様子は次の通りです。

これを次のように書き換えます。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

export default class myapp1 extends Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Hello, world!
        </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 40,
    textAlign: 'center',
    margin: 10,
  },

});

AppRegistry.registerComponent('myapp1', () => myapp1);

ホットリロード機能が有効であれば、エミュレータ上で R キーを二回押すと直ちに「リロード」され、 次のように表示が切り替わるはずです。

尚、参考のため書くとここでは次のように AVD を作成しています。

システムイメージは Marshmallow API Level 23 Android 6.0 (Google API) を選択しています。

以上で React Native の環境確認はできました。

ホーム > React Native > React Native 版の Hello, world