我正在使用来自createMaterialTopTabNavigator
的react-navigation
并尝试通过在其上添加一些组件来自定义标签栏。
正如您在其指南中所见:
https://reactnavigation.org/docs/en/material-top-tab-navigator.html#docsNav
有一个名为tabBarComponent
的选项可以传递给你创建自己的标签栏。但是,它完全覆盖了标签栏,这不是我想要的。
我想在标签栏的顶部添加一个自定义组件,然后在下面放置带有标签的默认标签。
谁能告诉我一个如何将组件添加到标签栏的示例?
例如,下面的代码用My Custom Component
文本替换选项卡,但我怎么能同时拥有它们? (自定义组件和标签)
const myNavigation = createMaterialTopTabNavigator({
firstTab: FirstTabScreen,
secondTab: SecondTabScreen,
thirdTab: ThirdTabScreen,
},
{
tabBarComponent: props => (
<View><Text>My Custom Component</Text></View>
)
});
创建自定义标签栏组件并不困难,下面是我为我正在处理的项目创建的自定义标签栏的模仿示例。
但实际上并没有那么多,你的标签栏组件会收到一个导航道具,它保存你在createMaterialTopTabNavigator
中设置的不同路线。因此,您只需遍历这些路径并为每个路径显示一个标签栏项。
CustomTabBar.jsx
export default class CustomTabBar extends React.Component {
render() {
const {navigation} = this.props;
const routes = navigation.state.routes;
return (
<SafeAreaView style={{backgroundColor: 'blue'}}>
<View style={styles.container}>
{routes.map((route, index) => {
return (
<View style={styles.tabBarItem}>
<CustomTabBarIcon
key={route.key}
routeName=route.routeName
onPress={() => this.navigationHandler(index)}
focused={navigation.state.index === index}
index={index}
/>
</View>
);
}
</View>
</SafeAreaView>
);
}
navigationHandler = (routeName) => {
this.props.navigation.navigate(routeName);
}
}
const styles = StyleSheet.create({
container: {
flexDirection: 'row',
alignContent: 'center',
height: 56,
width: '100%',
paddingHorizontal: 16,
backgroundColor: 'blue',
},
tabBarItem: {
flex: 1,
alignItems: 'center'
}
});
CustomTabBarItem.jsx
class CustomTabBarIcon extends React.PureComponent {
render() {
const {index, focused, routeName} = this.props;
let icon = '';
switch (index) {
case 0:
icon = 'a';
break;
case 1:
icon : 'b';
break;
case 2:
icon = 'c';
break;
default:
iconName = 'a';
}
return (
<TouchableWithoutFeedback
onPress={() => this.onSelect(routeName)}
>
<View style={[styles.container, focused ? styles.active : styles.inactive]}>
<View style={styles.icon}>
<Icon name={icon} color='white' size={24}/>
</View>
<Text style={styles.textStyle}>{routeName}</Text>
</View>
</TouchableWithoutFeedback>
);
}
onSelect = (routeName) => {
this.props.onPress(routeName);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
alignItems: 'center'
},
active: {
borderTopWidth: 3,
borderColor: 'white'
},
inactive: {
borderTopWidth: 3,
borderColor: 'blue'
},
textStyle: {
color: 'white',
fontSize: 13
}
});
一种非常简单的方法是使用Fragment from react。它解决了这个问题。
import React, {Fragment} from 'react';
您的组件返回可能如下所示
return (
<Fragment>
<MyCustomHeader/>
<MaterialTopTabBar/>
</Fragment>
)
您可以将自己的自定义组件添加到现有的顶部标签栏,如下所示:
import { createMaterialTopTabNavigator, MaterialTopTabBar } from "react-navigation";
tabBarComponent: props => <SafeAreaView>
<MyCustomHeader title='test' />
<MaterialTopTabBar {...props} />
</SafeAreaView>