我的屏幕在模拟器和少数移动设备 (Android) React-Native 中重叠。 (@react-navigation/stack": "^5.10.0")

Question

我正在为我的屏幕使用堆栈导航。我最初连接了我的设备（Android 版本 10 - realme XT）并且导航工作正常。但后来我在模拟器（Android 版本 9）上尝试了同样的事情，它开始重叠屏幕。其他设备（Android 版本 9 redmi note 5 pro）也发生了同样的事情。

导航文件代码为：

import React from 'react';
import {createStackNavigator} from '@react-navigation/stack';
import Abc from './abc';
import xyzfrom './xyz';
import {ImageBackground} from 'react-native';
import CommonBackground from '../../resource/images/StartupScreenBackground.png';
import Styles from './style';
import {NavigationContainer, DefaultTheme} from '@react-navigation/native';
import srt from './srt';

const MyTheme = {
  ...DefaultTheme,
  colors: {
    ...DefaultTheme.colors,
    primary: 'rgb(255, 45, 85)',
    background: 'transparent',
  },
};

const StartScreen = createStackNavigator();

function StartScreenNavigation(props) {
  return (
    <ImageBackground source={CommonBackground} style={Styles.imageContainer}>
      <NavigationContainer theme={MyTheme}>
        <StartScreen.Navigator
          screenOptions={{
            headerShown: false,
          }}
          >
          <StartScreen.Screen name="abc" component={abc} />
          <StartScreen.Screen
            name="xyz"
            component={xyz}
          />
          <StartScreen.Screen name="srt" component={srt} />
        </StartScreen.Navigator>
      </NavigationContainer>
    </ImageBackground>
  );
}

export default StartScreenNavigation;

我不明白这是Android版本的问题还是堆栈导航的问题。

谢谢！！

Answer 1

我不得不创建另一个组件并使用 props.children 以便我可以环绕它。

是的，它很蹩脚，它和为所有单独的屏幕包装 ImageBackground 一样好，但我的解决方案有助于减少至少几行代码。

太好了！！无需使用主题。但如果它适用于其他 android 版本（低于 10），那将是最好的解决方案。

谢谢！！

我的屏幕在模拟器和少数移动设备 (Android) React-Native 中重叠。 (@react-navigation/stack": "^5.10.0")

My screens are getting overlapped in emulator and few mobile devices(Android) React-Native. (@react-navigation/stack": "^5.10.0")

react-native

react-navigation

react-navigation-stack