在某些情況下，默認的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 (<TextInputonSubmitEditing={Keyboard.dismiss}/>);} } 復制代碼

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

keyboardDidShow, 鍵盤即將出現

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 */}<Buttontitle="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 */}<Buttontitle="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了。

總結

以上是生活随笔為你收集整理的自定义react-navigation的TabBar的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。