React-Navigation v5 - прозрачность между стековыми навигаторами

Question

Эй, у меня проблема с прозрачностью при использовании более одного Stack.Navigator .

Я создаю 2 Stack.Navigators -> один для экранов и один для всплывающих окон . Проблема в том, что у моих всплывающих окон прозрачный фон, и в этом случае мне нужно показать Экраны в фоновом режиме. Это работало в response.navigation v4, и теперь в v5 я не могу найти никакого решения, как решить эту проблему.

SNACK https://snack.expo.io/@m.jachym / реагировать на навигацию- прозрачность стека

структура навигации img

* Существует два Stack.Navigator s, потому что Stack.Navigator для всплывающих окон имеет разные и гораздо более сложные screenOptions . Также в Документах о вложенности навигаторов есть совет поместить один Stack.Navigator в другой. В этом случае проблема заключается в том, что при установке parent Stack.Navigator headerMode = "screen" и дочерних элементов Stack.Navigator headerMode = "none" дочерний headerMode наследуется от родитель. Та же проблема с другими свойствами - вот почему структура моей навигации такая, какая она есть.

Я знаю, что я делаю что-то не так, или это проблема новой версии реагирования-навигации, и я должен написать реагировать-навигационная команда? *

Answer 1

Проблема в том, что вы хотите, чтобы ваш стек Screens оставался в фоновом режиме при отображении экранов в стеке Modals. Вы установили прозрачный фон для экранов в модальном стеке, но ваш экран, содержащий сам стек Modals, не имеет прозрачного фона.

Вам также необходимо сделать экран, содержащий стек Modals прозрачным:

<Stack.Screen
  name="Modals"
  component={Modals}
  options={{ cardStyle: { backgroundColor: "transparent" } }}
/>

headerMode для детей наследуется от parent. Та же проблема с другими свойствами - поэтому структура моей навигации такая, какая она есть.

Навигаторы не наследуют конфигурацию своих родительских навигаторов. В случае, если вы говорите о конфигурации навигатора (реквизитах) и экранах, конфигурация навигатора не предназначена для экранов (например, экраны не имеют headerMode).

Вам не нужно так много навигаторов. С таким навигатором все в порядке:

const modalOptions = {
  headerShown: false,
  cardStyle: { backgroundColor: "transparent" },
  cardOverlayEnabled: true,
  cardStyleInterpolator: ({ current: { progress } }) => ({
    cardStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 0.5, 0.9, 1],
        outputRange: [0, 0.1, 0.3, 0.7]
      })
    },
    overlayStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 0.6],
        extrapolate: "clamp"
      })
    }
  })
};

const Navigation = () => {
  return (
    <Stack.Navigator headerMode="screen">
      <Stack.Screen name="Home" component={Home} />
      <Stack.Screen
        name="NewPopup"
        component={NewPopup}
        options={modalOptions}
      />
      <Stack.Screen name="Popup" component={Popup} options={modalOptions} />
    </Stack.Navigator>
  );
};