ローディング中

react-nativeでiOSアプリ開発 第14回 scrollable-tab-viewと font-awesomeを使う

みなさんこんにちは個別指導塾コミット塾長、AWESOME開発担当の船津です

今回はタブについて勉強してみました。

前回分はこちらreact-nativeでiOSアプリ開発 第13回 realmをreact-nativeで扱う(3)

今回作りたい機能

  • Todoリストの完了、未完了をタブで切り替える
  • タブはスワイプで動かしたい

今回参考にしたサイト

今後もいろんなライブラリを使っていきますが、基本的にスターの多いものを選んでいきます。そのほうが資料が多いので…

タブバー

入れるだけでスワイプとかアニメーションに対応してくれるすごいやつです
https://github.com/skv-headless/react-native-scrollable-tab-view

fontawesome

みんな大好きFontAwesomeです
http://fontawesome.io/

アイコン

https://github.com/oblador/react-native-vector-icons

実践

まずインストール

npm install react-native-vector-icons --save
npm install react-native-scrollable-tab-view --save

フォントを手動でプロジェクトにコピー

ここを参考にどうぞ、プロジェクトをxcodeで開いてからフォントのttfファイルをコピペするだけでOKでした

コードを見るぞ

index.ios.js

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native'
import App from './app/containers/app'

AppRegistry.registerComponent('realmPlayground', () => App);

containers/app.js

  • スクロールビューを設置します
  • customTabBarにpropsとして、タブの名前を渡します。
  • RealmTodo(前回作ったアプリ)にpropsとしてvisibilityを渡します。
  • の部分はただのHello,World!にしてもOKです
  • initialPageで最初に表示するページを指定します
import React, { Component } from 'react'
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  TouchableHighlight,
  Switch,
  RefreshControl,
  ScrollView,
} from 'react-native'

import RealmTodo from '../components/realmTodo'
import { ListView } from 'realm/react-native'
import ScrollableTabView, { DefaultTabBar, } from 'react-native-scrollable-tab-view'
import CustomTabbar from '../components/customTabBar'

export default class App extends Component {
  render() {
    return (
      <ScrollableTabView style={{marginTop: 20, }} tabBarPosition='bottom' initialPage={0} renderTabBar={() => <CustomTabbar tabList={['Active', 'Completed', 'All']}/>}
        >
        <RealmTodo tabLabel={'navicon'} visibility={'show_active'} />
        <RealmTodo tabLabel='check-square-o' visibility={'show_completed'} />
        <RealmTodo tabLabel="list-alt" visibility={'show_all'} />
      </ScrollableTabView>
      
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  input: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  list: {
    flex: 4,
    justifyContent: 'center',
  },
  completed: {
    textDecorationLine: 'line-through',
    textDecorationStyle: 'solid',
  },
});


components/customTabBar.js

  • タブに対してアイコンを定義します
  • propsとして渡されたtabListはこちらで順番にタブに表示されます
import React, { Component } from 'react'
import {
  StyleSheet,
  Text,
  View,
  TouchableOpacity,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome'
const myIcon = (<Icon name="rocket" size={30} color="#900" />)

export default class CustomTabBar extends Component {
  tabIcons = []

  propTypes:{
    goToPage: React.PropTypes.func,
    activeTab: React.PropTypes.number,
    tabs: React.PropTypes.array,
  }

  render() {
    return <View style={[styles.tabs, this.props.style, ]}>
      {this.props.tabs.map((tab, i) => {
        return <TouchableOpacity key={tab} onPress={() => this.props.goToPage(i)} style={styles.tab}>
          <Icon name={tab} size={30} color={this.props.activeTab === i ? 'rgb(59,89,152)' : 'rgb(204,204,204)'} ref={(icon) => { this.tabIcons[i] = icon; }}
          />
          <Text style={this.props.activeTab === i ? styles.tabTextActive : styles.tabTextNotActive}>{this.props.tabList[i]}</Text>
        </TouchableOpacity>
      })}
    </View>
  }
}

const styles = StyleSheet.create({
  tab: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    paddingBottom: 10,
  },
  tabs: {
    height: 45,
    flexDirection: 'row',
    paddingTop: 5,
    borderWidth: 1,
    borderTopWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderBottomColor: 'rgba(0,0,0,0.05)',
  },
  tabTextNotActive: {
    fontSize: 12,
    color: '#B3B3B3'
  },
  tabTextActive: {
    fontSize: 12,
    color: 'rgb(59,89,152)'
  },
})

出来上がり

こんな感じになります

Screen Shot 2016-08-30 at 11.14.07

最後に

CustomTabBarのところが難しかったです。
公式の真似をしただけなところがあるので、まだまだ勉強が必要ですね。
各タブに情報を渡すときにもっといい方法があるはず…
配列を渡してるのカッコ悪いですよね、そのうち直します

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.