NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
•
6 recomendaciones•3,156 vistas
React & ReactNative入門者の会#2 での登壇資料になります。 最初なのでまずはiOS/Android両対応をテーマにUI部分におけるデザイン面での際の統一を上手く図るためにNativeBaseを使用してUIサンプルを作成した際の備忘録をまとめました。 ReactNativeを始めるにあたり少しでも参考になれば幸いです。 ★Github https://github.com/fumiyasac/LikeCustomTransition
Recomendados
Más contenido relacionado
La actualidad más candente
La actualidad más candente (20)
Similar a NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
Similar a NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた (15)
Más de Fumiya Sakai
Más de Fumiya Sakai (20)
Último
Último (8)
NativeBaseをはじめとするUIに関する ライブラリを使ったサンプルを作ってみた
- 8. ✦ UI表現やAPIとの通信時等の場面で今回はライブラリを有効活用 使用したライブラリやサンプルについて 今回はUI設計や作成の過程で便利になりそうなものは積極的に使用していく方針で進めていく形にしました ★NativeBase以外で使用ライブラリの紹介 ★おまけ：ReactNativeを学習するにあたってこんな感じで進めました （Qiita）ReactNative事始めから簡単なサンプルを読み解くまでの実践記録ノート http://qiita.com/fumiyasac@github/items/71b8ff88d96289d43593 （Github）※記事内のリンクをご参照ください ライブラリ名 ライブラリの機能概要 バージョン axios 非同期通信（GETのみ） 0.16.0 react-native-router-flux 画面遷移のコントロール 3.38.0 react-native-scrollable-tab-view タブ型のコンテンツ切り替え 0.6.3 react-native-snap-carousel カルーセル型の画像切り替え 2.1.0 react-native-super-grid UICollectionView型のGridView表示 1.0.2 react-native-timeline-listview スケジュール型のコンテンツ表示 0.2.0 ※今回のサンプルではReduxは使用しませんでした。 ※React: 16.0.0-alpha.6 ※react-native: 0.43.3
- 10. ✦ 基点となるのは<Container>タグでその中にコンテンツを展開する NativeBaseでの構造の基本形 ReactNativeのComponentとNativeBaseで拡張されたComponentと併用することでより良いデザインを作れる NativeBaseを活用したレイアウトの事始め ★タグのおおまかな基本形はこのような感じになる 基点となるのはContainerタグになり、その中にそれぞれのタグ構造が 展開されていく形になる。この形はヘッダー・コンテンツ・フッターの コンテンツの雛形のような形を想定。 //コンポーネントの内容をレンダリングする render() { return ( <Container> <Header> ��… </Header> ���<Content> ��… </Content> <Footer> ���… </Footer> </Container> } } ・コンテンツ表示部分に関してもContentタグやContainerタグが基点 ・任意のNativeBaseで使用しているタグについては拡張しているタグ の機能を使用することができます。 例. NativeBaseのButtonタグでクリックした際の動作を設定 【ポイント】 <Button rounded onPress={ () => Actions.SomeContents() } /> → Githubに各コンポーネントのソースがあるので見ておくと良い。
- 11. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(1): ヘッダー ヘッダーのデザインに関してはポピュラーなものはとても作りやすい（逆にこの部分は改造が難しいかも） ★ヘッダー部分の実装例 iOSの場合にのみ、 StatusBarを設定する iOS Android iOS/Androidでヘッダー文言の位置が異なる カーソルのデザインが変更されている const CommonHeader = ({ title, icon }) => { //表示する要素を返す return ( <Header iosBarStyle="light-content"> <Left> <Button transparent onPress={ () => Actions.pop() }> <Icon name={icon || "arrow-back"} /> </Button> </Left> <Body> <Title>{title}</Title> </Body> <Right /> </Header> ); }; ・共通で使用するヘッダー部分についてはComponent化 ・戻るボタンの部分についてはアイコンを使用 ※NativeBaseでサポートされている iOS用のStatusBar設定
- 12. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(2): グリッドレイアウト NativeBaseをインストールすると一緒にreact-native-easy-gridが使用でき複雑なレイアウトがし易くなる ★グリッドレイアウト部分の実装例 iOS Android react-native-easy-gridが使用可能 //react-native-easy-gridのコンポーネントの呼び出し import { Col, Row, Grid } from 'react-native-easy-grid'; ・・・ <Content> <Grid> <Col style={・・・}> <Image style={・・・} source={・・・} /> </Col> <Col> <Row style={・・・}> <Image style={・・・} source={・・・} /> </Row> <Row style={・・・}> <Image style={・・・} source={・・・} /> </Row> </Col> </Grid> </Content> ※実装のTipsはreact-native-easy-gridを参照 https://github.com/GeekyAnts/react-native-easy-grid
- 13. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(3): ドロワーメニュー NativeBaseをインストールすると一緒にreact-native-drawerが使用できてドロワーに関する設定も細かい ★ドロワー部分の実装例 iOS Android ※実装のTipsはreact-native-drawerを参照 https://github.com/root-two/react-native-drawer 実装のポイントまとめ： 1. メインコンテンツ側のComponentにドロワーメニューの開閉に ����関する処理を用意する。 2. <SideContents closeDrawer={this.closeDrawer} />のよ ����うな形でサイドメニュー側のComponentへ引き渡す。 react-native-drawerが使用可能
- 14. ✦ ここで実際のサンプルアプリの部分を4つほど挙げてみましょう NativeBaseレシピ(4): リストアイテム ListItemは決まった形であればStyleSheetがなくてもOK&様々なケースでの実装がDocumentに掲載されている ★リストアイテム部分の実装例 iOS Android※上記のようにある程度決まった見た目はサポートしている const CommonComment = ({ comment }) => { ��・・・ //表示する要素を返す return ( <ListItem avatar> <Left> <Thumbnail source={image_url} /> </Left> <Body> <Text>{title}</Text> <Text style={・・・} note>{description}</Text> </Body> <Right> <Text note>{time}</Text> </Right> </ListItem> ); }; サムネイル表示のスタイル