ReactNativeでgulpとreact-jadeを使ってみる

あんまりモバイル興味ないのだけど、一応試しておく。要は普通のフロントエンドスタックで実装できるかのテスト

mizchi/react-native-playground-with-gulp

これをcloneして、

npm install react-native-cli -g
sh init.sh
npm install
gulp watch

でgulpの監視を開始。あとは xcodeproj 開く。

何が出来るようになったか

View(style=styles.container)
  Text Welcome with gulp

みたいなjadeのテンプレートがReactNativeでも使える。

呼び出し側。今回はbabel。coffeeでもよかった。

'use strict';
global.React = global.require('react-native');
let xtend = require('xtend');

let {View, Text} = React;
let template = require('./template');
let styles = React.StyleSheet.create(require('./styles'));

let HelloNative = React.createClass({
  render: function() {
    return template(xtend({}, {View, Text, styles}));
  }
});

React.AppRegistry.registerComponent('HelloNative', () => HelloNative);

基本的にプリプロセスしたjsをbrowserifyしてindex.ios.jsにブチ込んてるだけ。

ハマったところ

react-native環境で普通のreactをrequireすると死ぬので、react-jade が吐く typeof React !== "undefined" ? React : require("react")' みたいなコードがダメ。

仕方ないのでgulp-replaceで次のようなgulpタスク書いて回避した

gulp.task 'build:jade', ->
  gulp.src('src/**/*.jade')
    .pipe jade()
    .pipe replace('typeof React !== "undefined" ? React : require("react")', 'React')
    .pipe(gulp.dest('lib'))

乱暴な感じがする。

あと browserify が var React = require('react-native') は出来ないので、global.React = global.require('react-native') として雑に回避したりした。

たぶん、rootのnodeを2つ以上にすると、react-jadeが勝手にdivのrootを追加しようとして死ぬ気がしている。