Edited at
SchooDay 13

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

More than 1 year has 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用でも同じように出来るのかも確認してみたいと思います。

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