expoでおしゃれなタブ切り替えを実装する。【コピペで動く】

2023年11月21日 2023年11月21日

abyblog

expoのアプリ内でタブを使用した切り替えを実装したい時があるかと思います。

今回は、簡単にできるおしゃれなタブのコードを紹介します。

画面内で表示する要素を切り替えるのにとても便利なので、使えるようになるとデザインの幅が広がりますよ！

タブイメージ

選択すると、文字の色が変化して、下にアンダーバーが入るようになります。

目次（クリックで読みたい部分にジャンプできます）

1 実際のコード
2 コード解説
- 2.1 useStateでタブの状態を管理
- 2.2 タブの表示とスタイル
3 まとめ

実際のコード

では、早速コードから紹介します。

import部分は省略しているので、適宜必要な要素をインポートしてください。

       const [activeTab, setActiveTab] = useState(1); // タブの状態を管理。最初に表示されるタブは1


~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

       <View style={styles.tabContainer}>
          <TouchableOpacity 
            style={[styles.tabButton, activeTab === 1 ? styles.tabButtonActive : null]}
            onPress={() => setActiveTab(1)}
          >
            <Text style={[styles.tabButtonText, activeTab === 1 ? styles.tabButtonTextActive : null]}>
              Tab1
            </Text>
          </TouchableOpacity>

          <TouchableOpacity 
            style={[styles.tabButton, activeTab === 2 ? styles.tabButtonActive : null]}
            onPress={() => setActiveTab(2)}
          >
            <Text style={[styles.tabButtonText, activeTab === 2 ? styles.tabButtonTextActive : null]}>
              Tab2
            </Text>
          </TouchableOpacity>
        </View>

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~


{activeTab === 1 && (
    <View>
    //タブ1の要素を記載
    </View>
)}

{activeTab === 2 && (
    <View>
    //タブ2の要素を記載
    </View>
)}

スタイルシート

tabContainer: {
    flexDirection: 'row',
    justifyContent: 'center',
    padding: 10,
    // backgroundColor: '#f8f8f8', // 薄いグレーの背景色
  },
  tabButton: {
    borderBottomWidth: 2,
    borderColor: 'transparent', // 透明な境界線
    paddingBottom: 8,
    paddingHorizontal: 20,
    marginHorizontal: 10,
  },
  tabButtonText: {
    color: '#666', // 暗めのグレーテキスト
    fontSize: 16,
  },
  tabButtonActive: {
    //borderBottomColor: '#007BFF', // アクティブなタブの境界線は青色
    borderBottomWidth:1,
    paddingBottom: 6, // アクティブなタブは少し境界線に近づける
    marginBottom:2,

    borderColor:"#007BFF",
  },
  tabButtonTextActive: {
    color: '#007BFF', // アクティブなタブのテキストも青色
    fontWeight: 'bold',
  },

これらをコピペして、使用してください。