在某些情況下，默認(rèn)的react-navigation的tab bar無(wú)法滿足開(kāi)發(fā)者的要求。這個(gè)時(shí)候就需要自定義一個(gè)tab bar了。本文就基于react-navigtion v2來(lái)演示如何實(shí)現(xiàn)一個(gè)自定義tab bar。

這里主要處理的是再android里，當(dāng)界面中有輸入框，喚起軟鍵盤(pán)的時(shí)候位于底部的tab bar也會(huì)浮動(dòng)到鍵盤(pán)的上方。這顯然不是我們需要的。所以，需要用自定義的tab bar來(lái)解決這個(gè)問(wèn)題。

Keyboard模塊

問(wèn)題是，有鍵盤(pán)的時(shí)候tabbar會(huì)被頂起來(lái)，鍵盤(pán)消失的時(shí)候tab bar也會(huì)恢復(fù)到正常的位置。 那么處理這個(gè)問(wèn)題的最好辦法就是，當(dāng)鍵盤(pán)喚起的時(shí)候讓tab bar不可見(jiàn)，當(dāng)鍵盤(pán)消失當(dāng)時(shí)候再讓tab bar顯示出來(lái)。

這就需要用到Keyboard了。

import { Keyboard } from 'react-native'; 復(fù)制代碼

Keyboard模塊專門(mén)用來(lái)處理鍵盤(pán)事件。通過(guò)這個(gè)模塊我們就可以得知鍵盤(pán)要喚起，還是要消失。

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}/>);} } 復(fù)制代碼

在componentDidMount的時(shí)候綁定鍵盤(pán)的兩個(gè)事件：

keyboardDidShow, 鍵盤(pán)即將出現(xiàn)

keyboardDidHide, 鍵盤(pán)即將隱藏

通過(guò)Keyboard模塊綁定了這兩個(gè)事件之后就可以在綁定的回調(diào)里讓tab bar顯示和隱藏了。

自定義tab bar

在react-navigation v2中，要實(shí)現(xiàn)自定義的tab bar非常簡(jiǎn)單：

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 */} ); 復(fù)制代碼

這里創(chuàng)建了一個(gè)每一個(gè)tab項(xiàng)都是一個(gè)stack navigator的tab bar。這里當(dāng)然使用的是默認(rèn)的tab bar。方法createBottomTabNavigator會(huì)返回一個(gè)在底部的tab bar。

我們來(lái)添加一個(gè)自定義的tab bar：

// ...略...export default createBottomTabNavigator({Home: HomeStack,Settings: SettingsStack,},{tabBarComponent: CustomTabComponent,} ); 復(fù)制代碼

CustomTabView就是自定義的tab bar。

當(dāng)程序運(yùn)行起來(lái)以后，react-navigation會(huì)把tab bar所需要的內(nèi)容（tab的label、icon、navigate到什么地方等都通過(guò)prop的方式傳進(jìn)來(lái)）。但是，我們這里并不打算做其他的定制，所以可以通過(guò)一個(gè)簡(jiǎn)單的方式把這些tab bar的item都繪制出來(lái)。

這就需要用到react-navigation-tabs。這個(gè)包提供了tab bar的所有默認(rèn)的實(shí)現(xiàn)。包括上面提到的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} />;} } 復(fù)制代碼

在keyboard顯示的時(shí)候隱藏tab bar：

keyboardWillShow = () => {this.setState({ visible: false });}; 復(fù)制代碼

在鍵盤(pán)隱藏的時(shí)候顯示tab bar：

keyboardWillHide = () => {this.setState({ visible: true });}; 復(fù)制代碼

顯示出全部的tab item：

render() {return this.state.visible && <BottomTabBar {...this.props} />;} 復(fù)制代碼

最后

處理軟鍵盤(pán)導(dǎo)致的tab bar上浮這個(gè)問(wèn)題就完美解決了。其他的很多時(shí)候軟鍵盤(pán)的出現(xiàn)都會(huì)導(dǎo)致類似的問(wèn)題。基本上都可以通過(guò)綁定Keyboard模塊的方式來(lái)解決。

對(duì)于tab bar本身有定制需要的，則可以通過(guò)自定義tab bar實(shí)現(xiàn)。正好本文解決了軟鍵盤(pán)對(duì)tab bar的影響，也開(kāi)是了一個(gè)解決自定義tab bar的門(mén)。有深度定義tab bar的同學(xué)，就需要解析從react-navigation傳過(guò)來(lái)的props了。

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。