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

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

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

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

今回作りたい機能

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

今回参考にしたサイト

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

タブバー

入れるだけでスワイプとかアニメーションに対応してくれるすごいやつです

fontawesome

みんな大好きFontAwesomeです

アイコン

実践

まずインストール

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)'
  },
})

出来上がり

こんな感じになります

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

最後に

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

Instagram Feed

Load More

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →