React Native导航抽屉问题('navigation.opendrawer'未定义))

ma8fv8wu  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(357)

嗨,伙计们,我是新来的。我想使用带有菜单按钮的抽屉导航。但实际上我可能不太明白。当我按下opendrawer的按钮时,我得到了这样的错误;
typeerror:navigation.opendrawer不是一个函数(在“navigation.opendrawer()”中,“navigation.opendrawer”未定义)
这是我的零食例子;https://snack.expo.io/@vubes/抽屉支票
下面是我代码中有用的部分。也许你能理解我的问题。提前感谢任何能提供帮助的人。

function DovizStack({navigation}) {

  return (
    <Stack.Navigator
      initialRouteName="Döviz"
      screenOptions={{
        headerStyle: { backgroundColor: "#1D1D1D" },
        headerTintColor: "#fff",
        headerTitleStyle: { fontWeight: "bold" },
      }}
    >
      <Stack.Screen
        name="Doviz"
        component={Doviz}
        options={{
          title: "Döviz",
          headerTitleAlign: "center",
          headerLeft: () => (<TouchableOpacity style={{paddingLeft:20}} onPress={()=> navigation.openDrawer()}>
          <MaterialCommunityIcons name="menu" color={"white"} size={20} />
             </TouchableOpacity>),
        }}
      />
      <Stack.Screen
        name="dovizBuyDetails"
        component={dovizBuyDetails}
        options={{ title: "Alış", headerTitleAlign: "center" }}
      />
      <Stack.Screen
        name="dovizSellDetails"
        component={dovizSellDetails}
        options={{ title: "Satış", headerTitleAlign: "center" }}
      />

    </Stack.Navigator>
  );
}

我有5个这样的堆栈。之后是我的账单。
抽屉钉;

function DrawerStack() {
  return(
      <Drawer.Navigator initialRouteName="Menu" drawerPosition= "right" >
      <Drawer.Screen name="stack" component={stack} />
        <Drawer.Screen name="Doviz" component={DovizStack}/>
        <Drawer.Screen name="Altın" component={AltinStack} />
      </Drawer.Navigator>

  )
}

和默认堆栈;

export default function stack() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          options={{ headerShown: false }}
          name="Giriş"
          component={LandingStack}
        />   
         <Stack.Screen
          options={{ headerShown: false }}
          name="drawer"
          component={myTab}
        />

      </Stack.Navigator>
      </NavigationContainer>

  );

}

实际上,我可以用登陆屏幕(登录页面,注册)运行抽屉,但我不想在没有登录的情况下显示

n3schb8v

n3schb8v1#

navigation 在您的范围内没有定义。
使用 options 作为 function 接收 navigation 看这里。
您的代码应该如下所示:

<Stack.Screen
  options={({ navigation }) => ({ //receive navigation here
    //navigation is defined  now you can use it
    headerLeft: () => (
        <TouchableOpacity 
           style={{paddingLeft:20}} 
           onPress={()=> navigation.openDrawer()}>
              <MaterialCommunityIcons name="menu" color={"white"} size={20} />
       </TouchableOpacity>),
  })}
/>

相关问题