タイトルのとおりだけど、シンプルなReact-Native用のModal Componentを作った。
標準でModal
コンポーネントは用意されてるんだけど、以下のように今はiOS
にしか対応しておらず、必要となったので作成した。
This component is only available in iOS at this time.
この辺りは時間が解決してくれるんだろうけど、 まだまだiOS
に比べてAndroid
のコンポーネントは少ないので注意しないといけない。React Native
でiOS
/Android
両対応のアプリを作る場合は、Android
用のコンポーネントを十分調査しておいたほうが良いと思う。
作ったもの
スクリーンショット
iOS
Android
使い方
インストール
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を採用していたらaction
やstore
)はReact-Native
であることをほぼ意識しなくても良さそう。当然といえば当然だが。例えばWEBシングルページアプリケーションをReact Native
に移植する際View
さえ解決してしまえば、すんなりと移植できるんじゃないかと感じる。
逆にテスト周りは貧弱でこれからという印象。今回のコンポーネントもテスト書こうと思ったけど、面倒臭すぎて中断した。今の理解では<Text>
とか<View>
と言ったReact Native
コンポーネントのモックを自分で用意する必要があるっぽい。(間違ってたら指摘ください。)この辺りは課題だろうと思う。
いろいろと参考になりそうなものを探す中で良さそうだと思ったのは以下のプロジェクト。React Native
とRedux
を使ったSoundCloud
クライントらしい。
React Native
はwrite once
でなくlearn once
だって話しなんだけど、それならPhoneGap
のがいいのでは?って思ったんだけど、アプリを開発している人から効いた話ではやはりネイティブUIを使えるのはかなり利点になるらしい。PhoneGap
などだとどうしても、もっさりとしたUIになってしまうし、1ソースで複数端末対応ってのも幻想っぽいらしい。
期待はしているけど、まだまだ課題はあるような感じで現時点でプロダクション(特にAndroidは)への採用は大変なんじゃないかな、って気がしてる。
とは言え、時間が確保できたら保留になっているはてなブックマークViewrをReact Native
に移植したい。