undefined

bokuweb.me

React Native用にシンプルなModal Componentを作った

タイトルのとおりだけど、シンプルなReact-Native用のModal Componentを作った。 標準でModalコンポーネントは用意されてるんだけど、以下のように今はiOSにしか対応しておらず、必要となったので作成した。

This component is only available in iOS at this time.

この辺りは時間が解決してくれるんだろうけど、 まだまだiOSに比べてAndroidのコンポーネントは少ないので注意しないといけない。React NativeiOS/Android両対応のアプリを作る場合は、Android用のコンポーネントを十分調査しておいたほうが良いと思う。

作ったもの

github.com

スクリーンショット

iOS
f:id:bokuweb:20160124161153g:plain

Android
f:id:bokuweb:20160124161242g:plain

使い方

インストール

npm i react-native-universal-modal

サンプル

<Modal isOpen={this.state.isOpen}
       styles={modalStyles}>
  <TouchableOpacity
     onPress={() => this.setState{isOpen: false}}>
    <View style={styles.modalInner}>
      <Text>Close Modal</Text>
    </View>
  </TouchableOpacity>
</Modal>

React-Nativeについて

<div><span>の代わりに<View><Text>などの専用コンポーネントが設けられており、これらを用いてUIを構築していく。 例えば上のサンプルの以下の部分はすべて用意されているコンポーネントだ。

  <TouchableOpacity
     onPress={() => this.setState{isOpen: false}}>
    <View style={styles.modalInner}>
      <Text>Close Modal</Text>
    </View>
  </TouchableOpacity>

またスタイルはStyleSheetで定義できる。以下のような感じ。

const styles = React.StyleSheet.create({
  text: {
    marginTop: 40
  }
});

ただし、cssとは異なるプロパティがあったり(例えばmarginHorizontalとかある)、位置指定に%が使えなかったり、いろいろハマりところが多い。従来であればCSSアニメーションを使用するような箇所にはAnimated.Viewってのが用意されていて、今回はこいつを使用してModalの表示/非表示を制御していたりする。

ただ、UI以外の部分(例えばFluxを採用していたらactionstore)はReact-Nativeであることをほぼ意識しなくても良さそう。当然といえば当然だが。例えばWEBシングルページアプリケーションをReact Nativeに移植する際Viewさえ解決してしまえば、すんなりと移植できるんじゃないかと感じる。

逆にテスト周りは貧弱でこれからという印象。今回のコンポーネントもテスト書こうと思ったけど、面倒臭すぎて中断した。今の理解では<Text>とか<View>と言ったReact Nativeコンポーネントのモックを自分で用意する必要があるっぽい。(間違ってたら指摘ください。)この辺りは課題だろうと思う。

いろいろと参考になりそうなものを探す中で良さそうだと思ったのは以下のプロジェクト。React NativeReduxを使ったSoundCloudクライントらしい。

github.com

React Nativewrite onceでなくlearn onceだって話しなんだけど、それならPhoneGapのがいいのでは?って思ったんだけど、アプリを開発している人から効いた話ではやはりネイティブUIを使えるのはかなり利点になるらしい。PhoneGapなどだとどうしても、もっさりとしたUIになってしまうし、1ソースで複数端末対応ってのも幻想っぽいらしい。

期待はしているけど、まだまだ課題はあるような感じで現時点でプロダクション(特にAndroidは)への採用は大変なんじゃないかな、って気がしてる。 とは言え、時間が確保できたら保留になっているはてなブックマークViewrをReact Nativeに移植したい。