react nativeでtabページを作るのは超簡単!

アプリのレイアウトを構成する上でtabはほぼ必須と言っても過言ではないですね。 今回はそのタブページを作成します。今回調べたやり方は二つあります。

必要なもの

  • react nativeを動かせる環境
  • create-react-native-app
  • (expo XDE)

expo XDEからのやり方


expo XDEを立ち上げ、プロジェクトを新しく作成します。 f:id:hiroaki77:20180209133627p:plain:w300

作成下プロジェクトのうち、tab navigationと書かれている方を選択し、作成したプロジェクトの位置をどこにするか設定します。 f:id:hiroaki77:20180209133528p:plain:w300

これにてタブが完成!!! プロジェクトを開き、

$ yarn start

をすると、インストールしたexpoアプリを通してこの動作を確認できます。 f:id:hiroaki77:20180209104612g:plain:w300

フォルダ構成として、 このタブはreact-navigation(https://reactnavigation.org)のライブラリを使用しており、navigation/MainTabNavigotor.js内でタブのデザインや文字を決めているのでこちらをいじる必要があります。

create-react-native-appからタブページを作るやり方


次にcreate-react-native-appしたプロジェクト内でタブを作成するやり方を書いていきます。 こちらでもreact-navigationを使用します。

create-react-native-appによって作成したアプリ内に入り、以下のコマンドを入力

$ yarn add react-navigation
//または
$ npm install --save react-navigation

App.js

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

// 1. react-navigationのTabNavigatorをimport
import { TabNavigator } from 'react-navigation';

import FirstTab from './tabs/FirstTab';
import SecondTab from './tabs/SecondTab';

// 2. 
var MainScreenNavigotor = TabNavigator({
  Tab1: {screen:FirstTab},
  Tab2:{screen:SecondTab}
});

MainScreenNavigotor.navigationOptions = {
  title:"Tab example"
};

export default MainScreenNavigotor;

tabs/FirstTab.js(SecondTab.jsも同じようにする)
FirstTab.js

import React from 'react';
import { Text, View, Button, Image } from 'react-native';

export default class FirstTab extends React.Component{
    static navigationOptions = {
        tabBarLabel:'Tab1'
    }
    render(){
        return (<View style={
                {
                flex:1,
                justifyContent:'center',
                alignItems:'center'
                }
            }>
                <Text style={{fontSize:30}}>
                これはタブ1です
                </Text>
            </View>
        );
    }
}

これでyarn startするとexpoアプリでタブがあることを確認することができます!
ただ、

  • アイコンがない
  • 選択しているタブかわかりづらい

という点で不完全ですね。

なので、

App.jsに選択、非選択タブをわかりやすくするoptionを記述し、アイコンをimportします。

App.js

var MainScreenNavigotor = TabNavigator({
  Tab1: {screen:FirstTab},
  Tab2:{screen:SecondTab}
},{
    //選択、非選択タブをわかりやすくするoptionを記述
  tabBarOptions:{
    activeTintColor:"white",
    activeBackgroundColor:"darkgreen",
    inactiveTintColor:"black",
    inactiveBackgroundColor:"green"
  }
});

@expo/vector-iconsからアイコンをimportするのですが、以下のリンク先
@expo/vector-icons directory
から好きなアイコンを探して、importします。

一つ目のタブにhomeアイコン、二つ目のタブにheartアイコンをimportしようとすると、 @expo/vector-icons directoryからそれぞれhome、heartで検索します。

アイコン横にEntypo、FontAwesome、Foundationなどと書かれています。

f:id:hiroaki77:20180209135023p:plain

それを参考に

import { Entypo } from '@expo/vector-icons';

のように記述します。 引数として以下のようにtintColorを渡すことでアクティブかそうでないかアイコンに対しても色付けすることができます。

FirstTab.js

import { Entypo } from '@expo/vector-icons';

export default class FirstTab extends React.Component{
    static navigationOptions = {
        tabBarLabel:'Tab1です',
        tabBarIcon:({tintColor})=>(
            <Entypo name="home" size={32} color={tintColor}/>
        )
    }

SecondTab.js

import { FontAwesome } from '@expo/vector-icons';

export default class SecondTab extends React.Component{
    static navigationOptions = {
        tabBarLabel:'タブ2だよ',
        tabBarIcon:({tintColor})=>(
            <FontAwesome name="heart" size={32} color={tintColor}/>
        )
    }

f:id:hiroaki77:20180209135727g:plain

以上で完成です!

補足: ちなみに以下のようにswipeEnable:trueを付け足したり、tabBarPositionを追記する事によってタブの配置を変えたり、スワイプできるタブにすることも可能です。

var MainScreenNavigotor = TabNavigator({
  Tab1: {screen:FirstTab},
  Tab2:{screen:SecondTab}
},{
  tabBarPosition:"bottom",
  swipeEnabled:true,
  tabBarOptions:{
+[f:id:hiroaki77:20180209135727g:plain]    activeTintColor:"white",
+    activeBackgroundColor:"darkgreen",
    inactiveTintColor:"black",
    inactiveBackgroundColor:"green"
  }
});

参考:
React Native Icons - YouTube
React Native tutorial-14-Creating tabs with TabNavigator - YouTube