时间戳

首页 > 解决方案 > 堆栈导航器标题按钮在按下时不会导航到路由

react-native - 堆栈导航器标题按钮在按下时不会导航到路由

问题描述

这是我的错误：undefined is not an object (evaluating 'navigation.navigate')

我的目标是在我的 StackNavigator 中Settings单击我的组件时导航到我的页面：LeftHeader

这是我的App.js文件的片段：

const FeedStackNav = () => {
    return (
      <Stack.Navigator>
        <Stack.Screen
          options={{
            title: "",
            headerLeft: ({ navigation }) => (
              <Header>
                <LeftHeader onPress={() => navigation.navigate("Settings")}>
                  <MenuIcon fill={"#C13B1E"} />
                </LeftHeader>
              </Header>
            ),
           
          }}
          name="Feed"
          component={Feed}
        />
      </Stack.Navigator>
    );
  };

这是我在我的应用程序中呈现堆栈的方式：

<NavigationContainer theme={theme}>
        <Stack.Navigator>
          <Stack.Screen
            options={{
              headerShown: false, 
            }}
            name=" "
            component={TabNav}
          />

          <Stack.Screen name="Settings" component={Settings} />
        </Stack.Navigator>
      </NavigationContainer>

我的LeftHeaderonPress 函数一定有问题

标签： react-native

解决方案

我只添加了一段代码来说明如何navigation.navigate('screen')在标题按钮上使用

 <NavigationContainer>
        <Stack.Navigator
          screenOptions={{
            headerStyle: {
              backgroundColor: '#f4511e',
            },
            headerTintColor: '#fff',
            headerTitleStyle: {
              fontWeight: 'bold',
            },
          }}>
          <Stack.Screen
            name="Home"
            component={HomeScreen}
            options={({navigation, route}) => ({
              headerRight: () => (
                <TouchableOpacity onPress={() => alert('Just clicked!!')}>
                  <FontIcon
                    onPress={() => navigation.navigate('CreateSession')}
                    name="video-camera"
                    color={whitish}
                    size={25}
                  />
                </TouchableOpacity>
              ),
            })}
          />
          <Stack.Screen name="CreateSession" component={CreateSessionScreen} />
          <Stack.Screen name="LiveSessions" component={LiveSession} />
        </Stack.Navigator>
      </NavigationContainer>

在上面的代码中观察用于访问navigation和route道具的回调函数

options={({navigation, route}) => ({
                  headerRight: () => (
                    <TouchableOpacity onPress={() => alert('Just clicked!!')}>
                      <FontIcon
                        onPress={() => navigation.navigate('CreateSession')}
                        name="video-camera"
                        color={whitish}
                        size={25}
                      />
                    </TouchableOpacity>
                  ),
                })}

推荐阅读