ネイティブアプリ初心者がReact Nativeを触ってみた

はじめに

本投稿は、Schooの2016年末特別企画「Schoo advent calendar 2016」の13日目の記事になります。

初めましてcafe-mochaです。

株式会社Schooに12月から入社したラーメンとピカチュウが大好きなサーバサイドエンジニアです。

入社して半月弱でSchooのシステムについては語れないの個人的に勉強していることなどを書いてみたいと思います。

フロントサイドはなんちゃってなのでテーマは「ネイティブアプリ初心者がReact Nativeを触ってみた」です。

公式ドキュメントを参考にやってみました。

React Nativeとは?

React Nativeは、React.jsを使用してネイティブアプリケーションを開発を出来るようにFacebookが公開したSDKです。

実行環境

今回は、自分の勉強なので以下の環境で実行してみました。

本来はAndroid用のアプリも作れるはずです。

環境	バージョン
実行環境	10.12.1
Node.js	v6.9.2
React Native	2.0.0
Xcode	8.1
iosシュミレータ	iPhone6

準備

公式ドキュメントにしたがって必要なライブラリをインストールします。

$ brew install node
$ brew install watchman

インストール

同様にReact Nativeのインストール。

$ npm install -g react-native-cli

プロジェクト作成

続いてプロジェクトを作成します。

$ react-native init ReactNativeTest

実行

プロジェクトが完成したらXcodeを開いて実行して見ましょう。

こんなか感じでシュミレータが立ち上がれば成功です。

実験

index.ios.jsにアラートを表示するようのコードを足してみます。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */
import React, { Component } from 'react';

import {
  AppRegistry,
  TabBarIOS,
  AlertIOS,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} from 'react-native';

export default class ReactNativeTest extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight style={styles.button}
            onPress={this.showAlert}>
            <Text style={styles.buttonText}>表示してみる？</Text>
        </TouchableHighlight>
      </View>
    );
  }
  showAlert() {
    AlertIOS.alert('', 'schooで勉強！', [{text: 'OK'}] )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

表示してみる?を押して下のようなアラートが表示されば成功です。

とりあえず今回はここまで

最後に

タブバーや検索バーなどを追加してどこまでネイティブアプリに近づけるのか試してみたいです。

Android用でも同じように出来るのかも確認してみたいと思います。

ここ違うんじゃね？とかこうしたほうがいいんじゃね？とかご指摘いただければ幸いです。