React Native中如何在指定页面隐藏/显示自定义导航栏

你可以通过监听当前路由状态来控制自定义导航栏的显示与隐藏，以下是两种可行方案：

方案一：通过NavigationContainer的onStateChange监听路由变化 #

在App.js中添加状态管理，根据当前页面路由判断是否渲染导航栏：

1. 在App类中添加状态，维护需要隐藏导航栏的页面列表和当前路由：

class App extends React.Component {
  state = {
    // 需要隐藏导航栏的页面名称集合
    hideNavRoutes: ['splash', 'signIn', 'otpForm', 'setPassword', 'forgetPassword'],
    currentRoute: 'splash' // 初始路由为闪屏页
  }

  // 原有componentDidMount代码不变
  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)
    }
}

2. 给NavigationContainer添加onStateChange回调，实时更新当前路由，再根据路由判断是否渲染导航栏：

render(){
  const { currentRoute, hideNavRoutes } = this.state;
  // 判断当前页面是否需要显示导航栏
  const shouldShowNav = !hideNavRoutes.includes(currentRoute);

  return (
    <View style={{flex:1,backgroundColor:"white"}}>
      <Provider store={store} >
        <NavigationContainer 
          onStateChange={(state) => {
            // 获取当前活跃的路由名称
            const currentRouteName = state.routes[state.index].name;
            this.setState({ currentRoute: currentRouteName });
          }}
        >
          <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>
          
          {/* 仅在需要显示的页面渲染导航栏 */}
          {shouldShowNav && <NavigationComponent />}

        </NavigationContainer>
      </Provider>
    </View>
  ) 
 }
};

方案二：将导航栏改为受控组件（更灵活） #

如果后续需要在其他组件中控制导航栏显示，可将导航栏改为受控组件，通过props接收显示状态：

1. 修改NavigationComponent.js，添加visible props控制渲染：

const NavigationComponent =(props)=>{
  // 若visible为false，直接返回null不渲染
  if (!props.visible) return null;

  // 原有业务逻辑保持不变
  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>
  )
}

2. 回到App.js，将shouldShowNav作为props传递给导航栏：

{/* 传递visible属性控制显示 */}
<NavigationComponent visible={shouldShowNav} />

注意事项 #

• 确保hideNavRoutes列表中的页面名称与Stack.Screen的name属性完全一致，否则判断会失效。
• 该方案适配React Navigation v5及以上版本，无需额外依赖。

内容的提问来源于stack exchange，提问作者Ahmed Yasin