使用Stack Navigator设置全局ImageBackground背景不生效问题求解

问题原因 #

1. 样式属性名拼写错误：React Native 样式属性采用小驼峰命名，你代码中写的BackgroundColor首字母B大写不符合规范，正确属性名为backgroundColor。
2. 资源引用写法错误：ImageBackground的source属性引用本地图片时需要用require包裹，你当前的写法无法正确加载背景图。

修正后的代码 #

const Stack = createStackNavigator();

const MyStackNavigator = () => (
  <ImageBackground source={require('../assets/my-background.png')} resizeMode='cover' style={{flex: 1}}>
    <Stack.Navigator screenOptions={{
      cardStyle: { backgroundColor: 'transparent' },
      // 针对React Navigation 6+版本可额外添加以下配置确保生效
      cardOverlayEnabled: false,
      cardShadowEnabled: false
    }}>
      <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 />
);

额外注意事项 #

• 所有Stack子页面的根容器不要设置不透明的背景色，保持默认透明即可透出底层的背景图
• 如果你使用的是React Navigation 5及以下版本，无需添加额外配置，仅修正属性名和资源引用即可生效

内容的提问来源于stack exchange，提问作者Erik Mazzelli