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

React Native for Androidでアプリを作る

More than 3 years have passed since last update.

React Native for Android: How we built the first cross-platform React Native app | Engineering Blog | Facebook Code
React Native | A framework for building native apps using React

Setup

Android SDKの追加

Android SDK Managerで以下をinstall

  • Intel x86 Atom System Image (for Android 5.1.1 - API 22)
  • Intel x86 Emulator Accelerator (HAXM installer)

react-nativeの準備

いくつかinstallする

npm install -g react-native-cli
brew install watchman
brew install flow

新しいProjectを始める

react-nativeコマンドを使ってprojectを作る

react-native init ReactSampleProject

これを実行するにはreact-nativerun-androidコマンドを使用する

cd ./ReactSampleProject
npm i
react-native run-android

ここでBuild Toolsの23.0.1が入っていないとエラーが出て終了する

$ react-native run-android
Starting JS server...
Building and installing the app on the device (cd android && ./gradlew installDebug)...

FAILURE: Build failed with an exception.

* What went wrong:
A problem occurred configuring project ':app'.
> failed to find Build Tools revision 23.0.1

ちゃんと入れてから再度走らせると、gradleのタスクが走っている様子が流れる
watchmanflowをHomebrewでinstallしていないとReact Packagerのwindowではエラーが出て、アプリは赤いエラー画面だけ表示される

20150915_092431.png

ちなみに一度run-androidで成功すると

$ react-native run-android
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
...

となり、普通のAndroidプロジェクトとしてビルド出来るようになります

20150915_094130.png

実装

手元のindex.android.jsを編集する
例えば以下のように書き換える
参考:Tutorial – React Native | A framework for building native apps using React

index.android.js
'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TextInput,
} = React;

var ReactSampleProject = React.createClass({
  getInitialState: function() {
    return {text: "sample"};
  },
  render: function() {
    var MOCKED_MOVIES_DATA = [
      {title: 'Title', year: '2015', posters: {thumbnail: 'http://i.imgur.com/UePbdph.jpg'}},
    ];
    var movie = MOCKED_MOVIES_DATA[0];
    return (
      <View style={styles.container}>
       <Text>{this.state.text}</Text>
       <Text>{movie.title}</Text>
       <Text>{movie.year}</Text>
       <Image style={styles.thumbnail} source={{uri: movie.posters.thumbnail}} />
       <TextInput onChangeText={(text) => this.setState({text})} value={this.state.text} />
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  thumbnail: { width: 30, height: 30, },
});

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

実機での起動

GenymotionやAVDなら何も設定しなくても動作しますが、実機の場合は動きませんでした
Genymotion等はF2押すとmenuが開いて[Reload JS]出来ますが、実機の場合はmenuボタンの代わりに
端末を振るとmenuが表示されます
表示したmenuで[Dev Settings}から[Debug server host for device]を選択し、react-nativeを動かしたPCのipアドレスを指定するとJSが読み込めて起動します

Screenshot_2015-09-16-09-26-44.png

コンポーネントを作る

タップすると入力されたテキストがToastに表示されるボタンを作ってみる

ToastButton.js
var React = require('react-native');
var {
  TouchableNativeFeedback,
  StyleSheet,
  ToastAndroid,
  View,
  Text,
} = React;

var ToastButton = React.createClass({
  propTypes: {
    text: React.PropTypes.string.isRequired,
  },
  render: function () {
    return (
      <TouchableNativeFeedback
        onPress={() =>
          ToastAndroid.show(`Your input is ${this.props.text}`, ToastAndroid.SHORT)}
        background={TouchableNativeFeedback.SelectableBackground()}
        style={styles.toastButton}>
        <View>
          <Text>Tap me</Text>
        </View>
      </TouchableNativeFeedback>
    );
  },
});

module.exports = ToastButton;

そして

index.android.js
<ToastButton text={this.state.text}/>

を適当なところに差し込めば良い
表示された"Tap me"をタップするとこうなる
Screenshot_2015-09-16-09-33-17.png

Androidのカスタムビューにあたるものがコンポーネントという形で簡単に作れる

所感

まだ足りないものが多くて厳しいという印象
画面遷移どうやるんだろう、って思ったけどReactだからSPAっぽく書き換えていけば良いからIntentは無いのかな
デザインを変更するにはCSSっぽいけどちょっと違う独自のstyleを使っていく必要があるが、ドキュメントも少なくて大変
いわゆるカスタムビューを作るのが簡単なので、慣れればxmlとjavaで書くよりも速くささっと画面作れそう

Facebookのオープンソース「React Native for Android」でクロスプラットフォーム開発が簡単になる | TechCrunch Japan
この記事によると3ヶ月でAndroidアプリ作ったとあるので、React理解してるエンジニアがちゃんと使えばそれなりになるのかも知れないが、Titaniumみたいなものかと認識している

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
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  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
ユーザーは見つかりませんでした