以前写过一篇文章是基于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 = foc