如何解决在React Navigation 5中将底部标签更改为材料底部标签时,为什么屏幕上什么也不显示?
所以,这是我的代码:
<NavigationContainer>
<Tab.Navigator
style={styles.tabbar}
initialRouteName="Sound"
>
<Tab.Screen
name="Sound"
component={SoundScreen}
options={{
tabBarIcon: ({ focused }) => {
let iconName;
iconName = focused
? "Sound"
: "SoundUnactive";
if (focused) {
return (
<View style={styles.tabbarLineContainer}>
<Icon name={iconName} size={32} />
<Line />
</View>
);
} else {
return <Icon name={iconName} size={32} style={styles.icon} />;
}
},}}
/>
<Tab.Screen
name="Home"
component={HomeScreen}
options={{
tabBarIcon: ({ focused }) => {
let iconName;
iconName = focused
? "Home"
: "HomeUnactive";
if (focused) {
return (
<View style={styles.tabbarLineContainer}>
<Icon name={iconName} size={32} />
<Line />
</View>
);
} else {
return <Icon name={iconName} size={32} style={styles.icon} />;
}
},}}
/>
<Tab.Screen
name="Personal Room"
component={PersonalRoomScreen}
options={{
tabBarIcon: ({ focused }) => {
let iconName;
iconName = focused
? "PersonalRoom"
: "PersonalRoomUnactive";
if (focused) {
return (
<View style={styles.tabbarLineContainer}>
<Icon name={iconName} size={32} />
<Line />
</View>
);
} else {
return <Icon name={iconName} size={32} style={styles.icon} />;
}
},}}
/>
</Tab.Navigator>
</NavigationContainer>
但是屏幕上没有任何显示。当我制作相同宽度的底部标签时,一切工作正常。另外,我之前将tabbarIcon属性传递给screenOptions。我也尝试使用材料底部的标签,但是我什么也没得到。那么,这是什么问题?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。