react-native - 我的屏幕在模拟器和少数移动设备（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 版本的问题还是堆栈导航的问题。

谢谢！！

标签： react-nativereact-navigationreact-navigation-stack

Answer 1

我必须创建另一个组件并使用props.children它才能将其包裹起来。

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

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

谢谢！！