我在React Navigation应用程序中遇到了一个自定义选项卡按钮组件的问题。
我已经定义了一个名为CustomTabBarButton的自定义选项卡按钮组件,我想将其用作特定Tab. Screen中选项卡栏内的按钮。然而,当我将其包含在Tab.Screen的选项中时,我遇到了一个问题
import CustomTabBarButton from "../CustomTabBarButton/CustomTabBarButton";
///
<Tab.Screen
name="AddButton"
children={() => <HomeStackScreen user={user} />}
options={{
tabBarLabel: "",
tabBarIcon: ({ focused }) => (
<Image
source={imageUrl}
resizeMode="contain"
style={{
width: 70,
height: 70,
backgroundColor: "#373737",
borderRadius: 100,
}}
/>
),
tabBarButton: () => (<CustomTabBarButton navigation={navigation} setScreen={setScreen} />)
}}
/>
字符串
我在控制台中得到以下错误:任何导航器都没有处理带有有效负载{“name”:“TrackerSettings”}的操作“NAVIGATE”。
您是否有一个名为“TrackerSettings”的屏幕?
如果您试图在嵌套导航器中导航到屏幕,请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator。
在同一个文件中,TrackerSettings按以下方式定义:
function HomeStackScreen({ navigation, user, backgroundColor }) {
return (
<HomeStack.Navigator>
<HomeStack.Screen
name="Tracker Setttings"
children={() => <TrackerSettings user={user} />}
options={({ navigation }) => ({
title: "Velg lokasjon",
})}
/>
型
问题是,当我在选项中包含tabBarButton时,它不起作用。然而,当我删除它时,如下所示,它按预期工作。
<Tab.Screen
name="AddButton"
children={() => <HomeStackScreen user={user} />}
options={{
tabBarLabel: "",
tabBarIcon: ({ focused }) => (
<Image
source={imageUrl}
resizeMode="contain"
style={{
width: 70,
height: 70,
backgroundColor: "#373737",
borderRadius: 100,
}}
/>
)
}}
/>
型
我正在寻找深入了解为什么tabBarButton导致问题,以及如何解决这个问题,这样我就可以使用我的自定义选项卡按钮组件。任何帮助或指导正确的实施将不胜感激。谢谢。
1条答案
按热度按时间ejk8hzay1#
正如你所说,你得到了以下错误:操作'NAVIGATE'与有效负载{“name”:“TrackerSettings”}没有被任何导航器处理。
所以,根据你的代码片段,我猜这是一个错字。尝试将你的名字的值更改为“TrackerSettings”而不是“Tracker Settings”,看看它是否有效-
字符串