使用 Stack Navigator 设置 ImageBackground

Question

我所面临的：

我有一个StackNavigator，我想在其中为它的所有子屏幕设置一个ImageBacgkround。问题是，我已经设置了我的 StackNavigator cardStyle: { backgroundColor: 'transparent' }，跟在 React Navigation Docs 之后，并将其包裹在 ImageBackground 中，但仍然无法正常工作。

我的尝试：

//My navigator component is more complex, but the concept looks something like this
//for both navigators
const Stack = createStackNavigator();

const MyStackNavigator = () => (
  <ImageBackground source=('../assets/my-background.png') resizeMode='cover' style={{flex: 1}}>
    //If I change BackgroundColor to 'red' or anything like that, it works fine
    //so I think the problem isn't related to styling properties 
    <Stack.Navigator screenOptions={{cardStyle: { BackgroundColor: 'transparent' } }}>
      <Stack.Screen name='Screen1' component={Component1}/>
      <Stack.Screen name='Screen2' component={Component2}/>
      <Stack.Screen name='Screen3' component={Component3}/>
    </Stack.Navigator>
  </ImageBackground>
);

export default App() => (
  <MyStackNavigator />
);

我在导航器组件中的DrawerNavigator 中通过sceneContainerStyle: { backgroundColor: 'transparent' } }} 做了同样的事情，它确实有效。我的 StackNavigator 似乎没有正确渲染它的父组件。

我的 StackNavigator 的一个屏幕：

我的 DrawerNavigator 的一个屏幕：

两个导航器的屏幕布局都包裹在一个透明容器View 中，因此您可以看到，抽屉屏幕正在正确呈现背景，但堆栈屏幕却不是。也许我将错误的道具传递给我的 StackNavigator？

Answer 1

使用 react-navigation 6，您可以使用主题选项自定义外观以使背景透明（默认为 rgb(242,242,242)）使用 NavigatorContainer 应用主题

here is an answer that may help