使用 Stack Navigator 设置 ImageBackground

Question

我面对的是：

我有一个 StackNavigator，我想在其中为所有子屏幕设置一个 ImageBacgkround。问题是，我已经在 React Navigation Docs 之后设置了我的 StackNavigator cardStyle: { backgroundColor: 'transparent' }，并将其包裹在 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

使用 Stack Navigator 设置 ImageBackground

Set ImageBackground using Stack Navigator

javascript

css

reactjs

react-native

react-navigation