自定義react-navigation的TabBar

在某些狀況下，默認的react-navigation的tab bar沒法知足開發者的要求。這個時候就須要自定義一個tab bar了。本文就基於react-navigtion v2來演示如何實現一個自定義tab bar。

這裏主要處理的是再android裏，當界面中有輸入框，喚起軟鍵盤的時候位於底部的tab bar也會浮動到鍵盤的上方。這顯然不是咱們須要的。因此，須要用自定義的tab bar來解決這個問題。

Keyboard模塊

問題是，有鍵盤的時候tabbar會被頂起來，鍵盤消失的時候tab bar也會恢復到正常的位置。
那麼處理這個問題的最好辦法就是，當鍵盤喚起的時候讓tab bar不可見，當鍵盤消失當時候再讓tab bar顯示出來。

這就須要用到Keyboard了。

import { Keyboard } from 'react-native';

Keyboard模塊專門用來處理鍵盤事件。經過這個模塊咱們就能夠得知鍵盤要喚起，仍是要消失。

import React, { Component } from 'react';
import { Keyboard, TextInput } from 'react-native';

class Example extends Component {
  componentDidMount () {
    this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow);
    this.keyboardDidHideListener = Keyboard.addListener('keyboardDidHide', this._keyboardDidHide);
  }

  componentWillUnmount () {
    this.keyboardDidShowListener.remove();
    this.keyboardDidHideListener.remove();
  }

  _keyboardDidShow () {
    alert('Keyboard Shown');
  }

  _keyboardDidHide () {
    alert('Keyboard Hidden');
  }

  render() {
    return (
      <TextInput
        onSubmitEditing={Keyboard.dismiss}
      />
    );
  }
}

在componentDidMount的時候綁定鍵盤的兩個事件：

1. keyboardDidShow, 鍵盤即將出現
2. keyboardDidHide, 鍵盤即將隱藏

經過Keyboard模塊綁定了這兩個事件以後就能夠在綁定的回調裏讓tab bar顯示和隱藏了。

自定義tab bar

在react-navigation v2中，要實現自定義的tab bar很是簡單：

import {
  createBottomTabNavigator,
  createStackNavigator,
} from 'react-navigation';

class DetailsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Details!</Text>
      </View>
    );
  }
}

class HomeScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        {/* other code from before here */}
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

const HomeStack = createStackNavigator({
  Home: HomeScreen,
  Details: DetailsScreen,
});

const SettingsStack = createStackNavigator({
  Settings: SettingsScreen,
  Details: DetailsScreen,
});

export default createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  },
  {
    /* Other configuration remains unchanged */
  }
);

這裏建立了一個每個tab項都是一個stack navigator的tab bar。這裏固然使用的是默認的tab bar。方法createBottomTabNavigator會返回一個在底部的tab bar。

咱們來添加一個自定義的tab bar：

// ...略...

export default createBottomTabNavigator(
  {
    Home: HomeStack,
    Settings: SettingsStack,
  },
  {
    tabBarComponent: CustomTabComponent,
  }
);

CustomTabView就是自定義的tab bar。

當程序運行起來之後，react-navigation會把tab bar所須要的內容（tab的label、icon、navigate到什麼地方等都經過prop的方式傳進來）。可是，咱們這裏並不打算作其餘的定製，因此能夠經過一個簡單的方式把這些tab bar的item都繪製出來。

這就須要用到react-navigation-tabs。這個包提供了tab bar的全部默認的實現。包括上面提到的props的解析都有。看下代碼：

import React from 'react';
import { Keyboard } from 'react-native';
import { BottomTabBar } from 'react-navigation-tabs';

type Prop = {};
type State = { visible: boolean };

export default class CustomTabComponent extends React.Component<Prop, State> {
  state: State = { visible: true };

  componentDidMount() {
    this.kbShowListener = Keyboard.addListener('keyboardDidShow', this.keyboardWillShow);
    this.kbHideListener = Keyboard.addListener('keyboardDidHide', this.keyboardWillHide);
  }

  keyboardWillShow = () => {
    console.log('keyboardwillshow');
    this.setState({ visible: false });
  };

  keyboardWillHide = () => {
    console.log('keyboardwillhide');
    this.setState({ visible: true });
  };

  componentWillUnmount() {
    this.kbShowListener.remove();
    this.kbHideListener.remove();
  }

  render() {
    return this.state.visible && <BottomTabBar {...this.props} />;
  }
}

在keyboard顯示的時候隱藏tab bar：

keyboardWillShow = () => {
    this.setState({ visible: false });
  };

在鍵盤隱藏的時候顯示tab bar：

keyboardWillHide = () => {
    this.setState({ visible: true });
  };

顯示出所有的tab item：

render() {
    return this.state.visible && <BottomTabBar {...this.props} />;
  }

最後

處理軟鍵盤致使的tab bar上浮這個問題就完美解決了。其餘的不少時候軟鍵盤的出現都會致使相似的問題。基本上均可以經過綁定Keyboard模塊的方式來解決。

對於tab bar自己有定製須要的，則能夠經過自定義tab bar實現。正好本文解決了軟鍵盤對tab bar的影響，也開是了一個解決自定義tab bar的門。有深度定義tab bar的同窗，就須要解析從react-navigation傳過來的props了。