React Native Tab Navigator: How to enable panel overflow icon?

Question

I want the center of the logo to be in the tarbar and the overflow bar at the top. How to do it?....... ....................................... .................................................. .................................................. ........ p>

import React from 'react'; import TabNavigator from 'react-native-tab-navigator'; import { View, Text, StyleSheet, Image } from 'react-native'; class App extends React.Component { constructor(props){ super(props) this.state={ selectedTab:'首页', } } render() { return ( <View style={styles.container}> <TabNavigator tabBarStyle={styles.tabBarStyle} tabBarShadowStyle={styles.tabBarShadowStyle}> <TabNavigator.Item selected={this.state.selectedTab === '首页'} title="首页" selectedTitleStyle={styles.selectedTitleStyle} renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/home.png')}/>} renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/home.png')}/>} onPress={() => this.setState({ selectedTab: '首页' })} > <Text>首页</Text> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '产品'} title="产品" selectedTitleStyle={styles.selectedTitleStyle} renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/product.png')}/>} renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/product.png')}/>} onPress={() => this.setState({ selectedTab: '产品' })} > <Text>产品</Text> </TabNavigator.Item> <TabNavigator.Item renderIcon={() => <Image style={styles.logoIcon} source={require('../../res/images/icons/logo_tab.png')}/>} > </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '活动'} title="活动" selectedTitleStyle={styles.selectedTitleStyle} renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/activity.png')}/>} renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/activity.png')}/>} onPress={() => this.setState({ selectedTab: '活动' })} > <Text>活动</Text> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" selectedTitleStyle={styles.selectedTitleStyle} renderIcon={() => <Image style={styles.tabBarIcon} source={require('../../res/images/icons/profile.png')}/>} renderSelectedIcon={() => <Image style={[styles.tabBarSelectedIcon ]} source={require('../../res/images/icons/profile.png')}/>} onPress={() => this.setState({ selectedTab: '我的' })} > <Text>我的</Text> </TabNavigator.Item> </TabNavigator> </View> ) } } const styles = StyleSheet.create({ container: { flex: 1 }, tabBarStyle: { backgroundColor: '#fff', overflow: 'visible', }, tabBarShadowStyle: { height: 0, }, selectedTitleStyle: { color: '#b42325', }, logoIcon: { zIndex: 9999, position: 'absolute', top: -50, left: -25, width: 60, height: 60, }, tabBarIcon: { width: 26, height: 26, resizeMode: 'contain', tintColor: '#5f5f5f', }, tabBarSelectedIcon: { width: 26, height: 26, resizeMode: 'contain', tintColor: '#b42325', } }); export default App; 

Current like this

And I want to do it.

Answer 1

You can use a custom navigator to customize the look of the tabs with the trick, but it will include more effort. Below are the docs https://reactnavigation.org/docs/navigators/custom

And here is a small example https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js