如何在特定屏幕上隐藏和显示自定义导航栏？

Question

我用的是反应本机。我已经创建了自定义导航条，并将它放在app.js的底部，所以我不需要在许多其他屏幕上导入它。但也有一些特殊的屏幕，我不想显示肚脐，就像飞溅屏幕或signUp，SignIn。我无法掩盖这一点。我不知道我能做什么？

navigation-component.js

import React ,{useState}from "react";
// import { Ionicons } from '@expo/vector-icons';
import Ionicons from 'react-native-vector-icons/Ionicons';
import {
    StyleSheet,
    View,
    Text,
    FlatList,
    TouchableHighlight
  } from 'react-native';

import MaterialCommunityIcons  from 'react-native-vector-icons/MaterialCommunityIcons';
import { useNavigation } from '@react-navigation/native';


    const NavigationComponent =(props)=>{
        const [TabIndex,setTabIndex] = useState(0)
        const [activeTab,setActiveTab] = useState(true)
        const [tabOptions,setTabOptions] = useState([
            {key: 0,name:"home"},
            {key: 1,name:"format-list-bulleted-square"},
    
            ])
        const navigation = useNavigation();
    
        const onPressHandler = (index)=>{
        setTabIndex(index)
        switch (index) {
            case 0:
                navigation.navigate("dashboard")
                break;
            
            case 1:
                navigation.navigate("map")
                break;
            }
        }
    
        return(
            <View style={styles.container}>
                 {tabOptions.map((tab, index, key) => (
                   <View style={styles.innerContainer} key={index}>
                         <MaterialCommunityIcons 
                             name={tab.name}       
                             size={
                                TabIndex==index && activeTab ?    
                                 40:
                                 32
                             }
                             color={
                                TabIndex==index && activeTab ?    
                                 "green":
                                 "black"
                             }
                             onPress={()=>onPressHandler(index)} 
                            style={
                                TabIndex==index && activeTab ?    
                                styles.Activtetab:
                                styles.NonActivtetab
                             } />
                     </View>
                 ))}
              </View>
    
        )
    }

app.js

class App extends React.Component {
  componentDidMount(){
    try {
        const granted = PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION
        )
        if (granted === PermissionsAndroid.RESULTS.GRANTED) {
        console.log("You can use the location")
        } else {
        null
        }
    } catch (err) {
        console.warn(err)
    }
}
render(){
  return (
    <View style={{flex:1,backgroundColor:"white"}}>

      <Provider store={store} >
      <NavigationContainer>
        <Stack.Navigator screenOptions={{headerShown:false}} initialRouteName="splash">
          <Stack.Screen name="splash" component={SplashScreen} />
          <Stack.Screen name="dashboard" component={DashboardScreen} />

          <Stack.Screen name="map" component={Map} />
          <Stack.Screen name="CreateGroundProfile-step1" component={Step1} />
          <Stack.Screen name="CreateGroundProfile-step2" component={Step2} />

          <Stack.Screen name="signIn" component={SignInScreen} />
          <Stack.Screen name="otpForm" component={OTPScreen}/>
          <Stack.Screen name="setPassword" component={SetPasswordScreen}/>     
          <Stack.Screen name="forgetPassword" component={ForgetPasswordScreen}/>  
          
        </Stack.Navigator>
      
        <NavigationComponent />

      </NavigationContainer>
  
      </Provider>
    </View>


  ) 
 }
};

Answer 1

要在特定的屏幕中隐藏自定义导航条，首先必须获得当前的屏幕名称，这样才能给出隐藏自定义导航条的条件。

react导航/本机有一个名为useRoute的钩子，您可以通过它找到当前的屏幕名。

将其放在app.js中：

import { useRoute } from '@react-navigation/native';
const route = useRoute();
console.log(route.name);

现在你可以写一个函数来检查热水器底部导航是否应该出现。

例如：

您可以在app.js中给出如下条件

{route.name!=splash&&route.name!=otpForm&&route.name!=signIn&&
 <NavigationComonent/>}

或者，您可以编写一个函数，根据您的需求返回任何变量true或false。然后你可以这样写：

{show&& <NavigationComponent />}

如果“显示为真”意味着要显示导航栏，则如果为“假”，则不会显示。