如何禁用或删除或隐藏反应本机抽屉中的项目选定空间 [英] How to disabled or remove or hide Item selected space in react native drawer

问题描述

我是本机反应的新手，我正在从那个抽屉创建一个抽屉，我导航到不同的不同屏幕.现在我想隐藏、禁用或删除该抽屉中选定的项目空间.我不想在这个抽屉上显示所选的样式.我已经上传了图片，请检查.谢谢..

I am new to react native, and I am creating a drawer from that drawer I am navigating to different different screen. now I want to hide or disabled or remove Item selected space from that drawer. I do not want to display that selected style on this drawer.. I have uploaded the image please check it . thanks..

这是我的抽屉代码，我想禁用市场访问按钮但我想导航该屏幕.可以吗请帮忙

here is my drawer code and I want to disabled Market visit Button But I want to navigate that screen. is it possible please help

基本上我想要蓝色焦点和整个导航项目专门从导航栏隐藏

Basically I want the blue focus and entire nav item hidden from the naw bar specifically

const Drawer = createDrawerNavigator()

export default function App() {
  return (

 <NavigationContainer>
  
      <Drawer.Navigator initialRouteName="Browse" openByDefault>
        <Drawer.Screen name="Browse" component={Browse} />  
        <Drawer.Screen style={{}} name="MarketVisit" component={MarketVisit}   options={{
                drawerLabel: () => null,
                title: null,
            }} 
           // enabled={false}
            />
      </Drawer.Navigator>
    </NavigationContainer>
  );
}

基本上我想要蓝色焦点和整个导航项目专门从导航栏隐藏

Basically I want the blue focus and entire nav item hidden from the naw bar specifically

推荐答案

您想将所选项目存储在状态变量中，然后使用 React.Children.map 遍历子项以遍历子项.如果子节点的索引是selectedNavItem中存储的索引，则返回null.React 不会在您的 DOM 中呈现 null，因此它不会显示任何内容.如果你想渲染一个看起来不同的组件，你也可以将一个 className 属性传递给很容易被选中的子组件.

You want to store the selected item in a state variable and then iterate throug children using React.Children.map to iterate through children. If the index of the child is the stored index in selectedNavItem, return null. React won't render null in your DOM, so it won't display anything. If you wanted to render a component that looks different you can also pass a className prop to the child that is selected quite easily.

const NavigationDrawer = (props) => {
  // the children of this component would be <NavigationDrawerItem /> components.
  const {
    children,
  } = props

  // the selected nav item
  const [selectedNavItem, setSelectedNavItem] = React.useState(null)

  // the index of the nav item is passed here and stored in the state variable
  const handleNavItemOnClick = (index) => {
    setSelectedNavItem(index)
  }

  }, [children])

  return <Drawer>
    {
    // iterate over the children components
    return React.Children.map(child, index) => {
      return index !== selectedNavItem
        // the first param of React.cloneElement is the component to clone, in our
        // case a child component. The second param is the props to pass that cloned
        // component.
        ? React.cloneElement(child, {
          onClick: () => handleNavItemClick(index)
        })
        : null
    })
    }
  </Drawer>
}

这篇关于如何禁用或删除或隐藏反应本机抽屉中的项目选定空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！