android 溢出按钮,React-Native封裝Tabbar 實現中間按鈕溢出效果(Android/iOS)

以前寫過一篇文章是基於react-native-tab-navigator 封裝Tabbar，由於RN版本的不斷更新，react-navigation，自17年1月開源以來就備受關注，Fb推薦使用庫，並且在React Native0.44中已將Navigator刪除。本文將以 react-navigation – 1.0.0-beta.27 / React-Native – 0.52.2 封裝實現導航欄的溢出效果！

RN實現按鈕凸出效果，在iOS移動端可以根據調整按鈕上下的布局就能實現溢出效果的樣式，Android端不支持溢出效果，所有要兼容Android端，則需要使用一個更高的容器試圖支持一個大圖標按鈕(使用絕對布局實現該效果)!

NEXT：實現代碼

/**

* Created by zhangyanlf on 2018/2/2.

*/

import React, { Component } from 'react';

import {

AppRegistry,

Platform,

StyleSheet,

Text,

View,

TouchableOpacity,

NativeModules,

ImageBackground,

DeviceEventEmitter

} from 'react-native';

export default class Tab extends Component {

renderItem = (route, index) => {

const {

navigation,

jumpToIndex,

} = this.props;

const focused = index === navigation.state.index;

const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;

let TabScene = {

focused:focused,

route:route,

tintColor:color

};

if(index === 2){

return (

key={route.key}

style={[styles.tabItem,{backgroundColor:'transparent'}]}>

);

}

return (

key={route.key}

style={styles.tabItem}

onPress={() => jumpToIndex(index)}

>

style={styles.tabItem}>

{this.props.renderIcon(TabScene)}

{this.props.getLabel(TabScene)}

);

};

render(){

const {navigation,jumpToIndex} = this.props;

const {routes,} = navigation.state;

const focused = 2 === navigation.state.index;

const color = focused ? this.props.activeTintColor : this.props.inactiveTintColor;

let TabScene = {

focused:focused,

route:routes[2],

tintColor:color

};

return (

{routes && routes.map((route,index) => this.renderItem(route, index))}

{/*設置中間按鈕凸出樣式 使用絕對定位*/}

key={"centerView"}

style={[styles.tabItem,{position:'absolute',bottom:0,left:(WIDTH-SCALE(100))/2,right:WIDTH-SCALE(100),height:SCALE(120)}]}

onPress={() => jumpToIndex(2)}>

style={styles.tabItem}>

{this.props.renderIcon(TabScene)}

{this.props.getLabel(TabScene)}

);

}

}

const styles = {

tab:{

width:WIDTH,

backgroundColor:'transparent',

flexDirection:'row',

justifyContent:'space-around',

alignItems:'flex-end'

},

tabItem:{

height:SCALE(80),

width:SCALE(100),

alignItems:'center',

justifyContent:'center'

},

tabText:{

marginTop:SCALE(13),

fontSize:FONT(10),

color:'#7b7b7b'

},

tabTextChoose:{

color:'#f3474b'

},

tabImage:{

width:SCALE(42),

height:SCALE(42),

},

};

效果圖展示：

想要了解 react-navigation 如何使用也可以查看我的上一篇文章react-navigation使用技巧,也可以查看react-navigation 中文翻譯： https://www.reactnavigation.org.cn。

PS: 運用 react-navigation 是問題記錄 (遇到的問題后續還會持續更新)

1.Android 導航欄文字居中效果

node_modules – react-navigation – src – views – Header – Header.js 修改368行 將 alignItems: Platform.OS === ‘ios’ ? ‘center’ : ‘flex-start’ 改為 ‘center’即可

title: {

bottom:0,

left: TITLE_OFFSET,

right: TITLE_OFFSET,

top: 0,

position: 'absolute',

alignItems: 'center'//Platform.OS === 'ios' ? 'center' : 'flex-start',}