嵌套导航器选项不起作用甚至显示

Question

我想在嵌套在 2 个导航器中的屏幕标题中显示后退按钮。

我将首先向您展示我是如何嵌套屏幕的，然后是我尝试过的方法

主堆栈导航器：

<Provider store = {store}>
        <StatusBar style="light" />
        <NavigationContainer>

      <Stack.Navigator initialRouteName="Login">
        <Stack.Screen name="Login" 
          component={Login}
          options=  {{
            headerLeft: null,
            headerTitleStyle: {
              fontWeight: 'bold',
              fontSize: 20,
              color: '#FFFFFF'
            },
            headerStyle: {
              backgroundColor: '#121212'
            }
        }}/>

        <Stack.Screen 
          name="Tabs" 
          component={Tabs} <-------------- The screen is nested in tabs
          options=  {{
              title: " ",
              headerTitleStyle: {
                fontWeight: 'bold',
                fontSize: 24,
                color: '#FFFFFF'
              },
             headerStyle: {
              backgroundColor: '#121212'
            },

          }}/>
      </Stack.Navigator>

    </NavigationContainer>
  </Provider>


      
    );
  } 
}

选项卡导航器，嵌套在堆栈导航器中作为“选项卡”：

//Bottom Tabs
function Tabs() {
  return (

<Tab.Navigator
initialRouteName="Home"
tabBarOptions={{
  activeTintColor:"#FFFFFF",
  inactiveTintColor:"#696969",
  style: {
    backgroundColor: '#000000'
  },
}}>

  <Tab.Screen 
    name="Create" 
    component={createFlowStack} <------------ This stack is where the screen header I want to add a back button to lies
    options={{ 
      tabBarLabel: ' ',
      tabBarIcon: ({ color, size }) => (
        <Ionicons name="md-add-circle" size={size} color={color} />
      ),
    }}
    
  />

    </Tab.Navigator>
  );
}

我已删除其他选项卡，因为它们与问题无关。此选项卡 create 嵌套了另一个堆栈导航器 createFlowStack：

createFlowStack，点击底部标签“create”时显示

  <CreateStack.Navigator 
    initialRouteName="Create"
    >

      <CreateStack.Screen 
          name="Create" 
          component={Create} />

      <CreateStack.Screen 
          name="Screenshot" 
          component={Screenshot}
          // options={({ navigation }) => ({
          //   headerRight: () => (
          //     <Button 
          //         onPress={() => navigation.goBack()}
          //         title="Info"
          //         color="#fff" />
          //   ),
          // })}
        />
    

如您所见，选项已被注释掉，但这并不重要。我试图在此屏幕左侧的标题中显示一个后退按钮，但我没有尝试过任何工作。

我尝试过的：

1. headerBackTitle：“返回”
2. headerBackTitle：“”
3. 自定义标题左键
4. headerRight：“”
5. 你看到的自定义标题右键被注释掉了

没有任何效果，没有任何显示，就像 createFlowStack 嵌套的导航器之一正在覆盖所有内容。请告诉我如何解决此问题！

Answer 1

将 expo SDK 从 39 更新到 40 解决了这个问题！