Help us understand the problem. What is going on with this article?

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

More than 3 years have passed since last update.

はじめに

本投稿は、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を開いて実行して見ましょう。

iamge2.png

image1.png

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

実験

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);

image3.png

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

image4.png

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

最後に

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

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

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

schoo
学べる生放送コミュニケーションサービス
https://schoo.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away