Help us understand the problem. What is going on with this article?

【react-native-paper】BottomNavigationを実装してみた

まずはじめに

react-native-paperが提供しているBottomNavigationはreact-navigationが提供しているBottomtabNavigationとかなり似ているのですが、ただアニメーションがついていたりちょっとリッチな感じになっています。
今回目指す実装はこういった実装です↓
Feb-22-2020 13-25-26.gif

react-native-paperの導入

過去導入手順をまとめた記事があるので参考にしてください
導入手順

公式ドキュメント通りBottomNavigationを実装してみる

ただ公式ドキュメント通りやるとMusicタブのアイコンがうんたらかんたらと言われるので、MUSICを消します。

App.js
import React from 'react';
import { Provider as PaperProvider } from 'react-native-paper';
import AppNavigator from './navigation/AppNavigator'

export default function App() {
  return (
    <PaperProvider>
      <AppNavigator />
    </PaperProvider>
  );
}
/navigation/AppNavigator.js
import * as React from 'react';
import { BottomNavigation, Text } from 'react-native-paper';

const AlbumsRoute = () => <Text>Albums</Text>;

const RecentsRoute = () => <Text>Recents</Text>;

export default class AppNavigator extends React.Component {
    state = {
        index: 0,
        routes: [
            { key: 'albums', title: 'Albums', icon: 'album' },
            { key: 'recents', title: 'Recents', icon: 'history' },
        ],
    };

    _handleIndexChange = index => this.setState({ index });

    _renderScene = BottomNavigation.SceneMap({
        albums: AlbumsRoute,
        recents: RecentsRoute,
    });

    render() {
        return (
            <BottomNavigation
                navigationState={this.state}
                onIndexChange={this._handleIndexChange}
                renderScene={this._renderScene}
            />
        );
    }
}

Feb-22-2020 13-41-12.gif

一旦タブでの動きは完成しました。

タブに色を指定してみる

タブに色を付与する場合は、state.routesの各画面にcolorタグを付与してあげます。

    state = {
        index: 0,
        routes: [
            { key: 'albums', title: 'Albums', icon: 'album', color: '#000000' },
            { key: 'recents', title: 'Recents', icon: 'history', color: '#009688' },
        ],
    };

確認してみる

あれ変わってない!!なんで変わってないんだろ・・・
と思ったら同じこと思っている人がいました。

callStack

どうやらshifting={true}が必要みたいです。追加していきます。

    render() {
        return (
            <BottomNavigation
                navigationState={this.state}
                onIndexChange={this._handleIndexChange}
                renderScene={this._renderScene}
                shifting={true}
            />
        );
    }

ついでにスタイル等も整えてみます。
修正したAppNavigator.jsは以下です。

/navigation/AppNavigator.js
import * as React from 'react';
import { View, StyleSheet } from 'react-native'
import { BottomNavigation, Text } from 'react-native-paper';

const AlbumsRoute = () =>
    <View style={styles.textStyle}>
        <Text >Albums</Text>
    </View>;

const RecentsRoute = () =>
    <View style={styles.textStyle}>
        <Text >Recents</Text>
    </View>;
export default class AppNavigator extends React.Component {
    state = {
        index: 0,
        routes: [
            { key: 'albums', title: 'Albums', icon: 'album', color: '#000000' },
            { key: 'recents', title: 'Recents', icon: 'history', color: '#009688' },
        ],
    };

    _handleIndexChange = index => this.setState({ index });

    _renderScene = BottomNavigation.SceneMap({
        albums: AlbumsRoute,
        recents: RecentsRoute,
    });

    render() {
        return (
            <BottomNavigation
                navigationState={this.state}
                onIndexChange={this._handleIndexChange}
                renderScene={this._renderScene}
                labeled={true}
                shifting={true}
            />
        );
    }
}

const styles = StyleSheet.create({
    textStyle: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
    },
})


Feb-22-2020 13-54-21.gif

最後に

stackcallの記事を見つけるまでに時間かかってしまったので、投稿しました。
個人的にこのアニメーションのタブは好きなのでこれから多様して何か作っていきます。
記事良かったら共有などお願いします!

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした