RN0.57新版本实现TabNavigator自定义中间凸出Tab
第一次写技术博客_(:°з」∠)_
第一次写技术博客,以往都是伸手党,这次难得自己想写个博客,最近才从游戏转行做RN,所以很多东西都不懂,这次的博客中代码也是很多借鉴了其他大佬的博客内容。项目中要实现一个Tabber中凸出一个按钮的效果,类似闲鱼App中“+”按钮的样式。参考了很多大佬的写法,我同事找到最方便的是tabBarButtonComponent这个东东,有兴趣的可以去看一下,我这里介绍的是大佬们重新渲染TabBar的方式。
代码部分
// An highlighted block
import React, {
Component } from 'react';
import {
Text,
View,
TouchableOpacity,
} from 'react-native';
export default class Tab extends Component {
renderItem = (route, index) => {
const {
navigation,
} = 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 === 1) {
return (<View
key={
route.key}
style={
[styles.tabItem, {
backgroundColor: 'transparent' }]}>
</View>
);
}
return (
<TouchableOpacity
key={
route.key}
style={
styles.tabItem}
onPress={
() => this.props.jumpTo(route.key)}
>
<View
style={
styles.tabItem}>
{
this.props.renderIcon(TabScene)}
<Text style={
{
...styles.tabText, marginTop: SCALE(10), color }}>{
this.props.getLabelText(TabScene)}</Text>