Question

const PI = ({navigation})=>{
   useEffect(()=>{
       // **option one** navigation.setOptions({tabBarVisible:false})
   )
   return(
       <View></View>
   );
}
 
const Foo=({navigation})=> {
  const [tabBarVisible,setTabBarVisible]= useState(true)
    useEffect(()=>{
      navigation.setOptions({tabBarVisible:tabBarVisible})
    })
    const changevisiual =(val)=>{
      navigation.setOptions({tabBarVisible:val})
    }
    return (
        <HomeStack.Navigator {/* **option two** onChange={({route})=>changevisiual(route.name=='pi'?false:true)}*/} >
            <HomeStack.Screen name="pi" component={PI} />
            <HomeStack.Screen name="tau" component={TAU} />
        </HomeStack.Navigator>
    )
}

  export default function App() {
    return (
      <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="fooobar" component={fooobar} />
            <Tab.Screen name="foo" component={Foo}/>
            <Tab.Screen name="bar" component={bar} />
            <Tab.Screen name="barfoo" component={barfoo} />
          </Tab.Navigator>
        </NavigationContainer>
      );
   }

我想使底部标签导航栏在PI屏幕上消失，然后在TAU屏幕和任何其他标签上重新出现。我目前正在使用expo，并且喜欢使用功能组件十倍:)我确实认为我可以使用Redux.js来完成这项任务，但是我对此还不太满意。我只展示了试图解决这个问题的两个选项或想法，尽管它们都不起作用。如果您想其他方法，请告诉我... //旁注是否有人知道如何通过.Screen解析道具/参数？

< .Screen name="e"  component={E} name={"Euler's number"} navigationOptions={({navigation})=>{header:'this is a header'} } />

//then either
function E ({navigation,route},props){
props.name
route.params.name
route.params.header
}

Answer 1

根据他们的文档，当您导航到屏幕时可以传递选项。因此，当您导航至PI时，您可以执行以下操作：

Navigation.push(props.componentId, {
  component: {
    name: 'PI',
    options: {
      bottomTabs: {
        visible: false
      }
    }
  }
});

您可以在此处查看有关此内容的更多信息：https://wix.github.io/react-native-navigation/docs/bottomTabs

Answer 2

您可以简单地通过不将所需的屏幕添加到标签导航器来完成此操作

function lang_(){
  return(
    <langStack.Navigator initialRouteName={"Language"}>
      <langStack.Screen name={"Language"} component={Language} options={{headerShown: false}} />
    </langStack.Navigator>
  )
}

function tabBar(){
  return(
    <AppTabs.Navigator>
        <AppTabs.Screen name="benifits" component={HomeScreen}/>
      </AppTabs.Navigator>
  )
}

这样，每当您导航到“语言”屏幕时，都不会出现选项卡栏，因为它不是tabBar的一部分，并且当您向后导航时，将显示选项卡栏。

<NavigationContainer>
      <AuthStack.Screen name="language" component={lang_} options={{headerShown:false}} />
      <AuthStack.Screen name="tabs" component={tabBar} options={{headerShown: false}}/>
</AuthStack.Navigator>

使用特定的stacknavigator屏幕隐藏tabnavigator

2 个答案: