我想让标志中心位于tarbar中,这是顶部的溢出标签栏。怎么做 ? ....... .................................................. .................................................. ...............................................
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;
答案 0 :(得分:0)
使用自定义导航器自定义选项卡视图可以解决问题,但它将包含更多工作。 这是文档https://reactnavigation.org/docs/navigators/custom