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

Question

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

我先给大家展示一下我是如何嵌套屏幕的，然后是我尝试过的

主堆栈导航器：

<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，单击底部选项卡“创建”时显示

  <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" />
          //   ),
          // })}
        />

如您所见，选项已被注释掉，但无论如何都没有关系。我试图在此屏幕左侧的 header 中显示后退按钮，但我尝试过的都不起作用。

我尝试过的：

header返回标题：“返回”
header返回标题：“”
自定义 header 左键
header右：“”
你看到的自定义header右键被注释掉了

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

Answer 1

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

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

Nested navigator options not working or even showing up

javascript

react-native

react-navigation

expo