自定义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了。