Code0 Sh

11 April 2015

code0-sh

やること宣言

Getting Started

環境構築

XcodeやHomebrewはインストール済み、Node.jsもnodebrewでインストール済みだったので

brew install --HEAD watchman
brew install flow

で必要な事前の環境は構築完了。

コマンドラインからReact Nativeを使用するためにreact-native-cliをインストールする。

npm install -g react-native-cli

プロジェクトの作成

サンプルプロジェクトAwesomeProjectを作成する。

react-native init AwesomeProject

作成したAwesomeProjectに移動してXcodeを起動する。

cd AwesomeProject
open AwesomeProject.xcodeproj

実行を行うとターミナルとiOS Simulatorが起動します。 iOS SimulatorでCmd+Control+Rでメニューを開きEnable Live Reloadを選択すると、編集結果を自動で反映してくれます。編集ファイルはindex.ios.jsです。テキストエディタでいろいろ編集してみる。

参考 Getting Started

Tutorial

モックデータを使用して表示

次のコンポーネントを使用する。

AppRegistry
Image
StyleSheet
Text
View

使用するコンポーネントとモックデータの宣言

var React = require('react-native');

var {
  AppRegistry,
  Image,
  StyleSheet,
  Text,
  View,
} = React;

var MOCKED_MOVIES_DATA = [
  {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
];

MockingDataの作成

var MockingData = React.createClass({
  render: function() {
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
        <Image
          source = 
          style={styles.thumbnail}
        />
        <View style={styles.rightContainer}>
          <Text style={styles.title}>{movie.title}</Text>
          <Text style={styles.year}>{movie.year}</Text>
        </View>
      </View>
    );
  }
});

styling

cssと似たようなプロパティを使用してスタイリング

参考 Flexbox

var styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  rightContainer: {
    flex: 1,
  },
  title: {
    fontSize: 20,
    marginBottom: 8,
    textAlign: 'center',
  },
  year: {
    textAlign: 'center',
  },
  thumbnail: {
    width: 53,
    height: 81,
  },
});

作成したコンポーネントを登録

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

misc 4