gpt4 book ai didi

javascript - react native 选项卡导航器 : How to let icon overflow tabbar?

转载 作者:数据小太阳 更新时间:2023-10-29 05:37:40 24 4
gpt4 key购买 nike

我想让 Logo 居中在 tarbar 中,也就是顶部的 overflow tabbar。怎么做 ? …………..................................................... ..................................................... .....................................................

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;

电流是这样的 enter image description here

我想喜欢这个.. enter image description here

最佳答案

使用自定义导航器来自定义您的选项卡 View 可以达到目的,但它需要付出更多的努力。这是文档 https://reactnavigation.org/docs/navigators/custom

这是一个小例子 https://github.com/react-community/react-navigation/blob/master/examples/NavigationPlayground/js/CustomTabs.js

关于javascript - react native 选项卡导航器 : How to let icon overflow tabbar?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42421150/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com