React Native安卓端absolute positioning失效 是否与react-navigation有关？

这个iOS端渲染正常、安卓端无法渲染指定View的问题和react-navigation的安卓端渲染逻辑直接相关。

根因说明 #

react-navigation的NavigationContainer在安卓端的原生实现中，会对内部的导航页面组件设置更高的原生渲染优先级，同容器内顺序靠前的兄弟元素即使设置了高zIndex，也会被后渲染的导航页面组件覆盖，这是安卓端React Native原生层对zIndex的解析规则和iOS不一致导致的跨端差异。

解决方案 #

• 方案1：调整同容器内元素顺序
  把绝对定位的悬浮View移动到RootNavigation组件的后面，React Native渲染同层级元素时，后渲染的元素默认层级更高，安卓端也会优先遵循这个规则，修改后的代码如下：

  // App.tsx
  export default function App() {
    const navigationRef = useNavigationContainerRef();
    const [pageState, setPageState] = React.useState<NavigationState>();
  
    const handleGetInitialState = () => {
      setPageState(navigationRef.current?.getRootState());
    };
  
    return (
      <NavigationContainer
        ref={navigationRef}
        onReady={handleGetInitialState}
        onStateChange={(state) => setPageState(state)}
      >
        <RootNavigation />
        {/* 悬浮View移到RootNavigation之后 */}
        <View
          style={{
            position: 'absolute',
            height: 200,
            width: 200,
            top: 0,
            right: 0,
            backgroundColor: 'red',
            zIndex: 99999,
          }}
        />
      </NavigationContainer>
    );
  }
  

• 方案2：将悬浮View移到NavigationContainer外层
  如果调整顺序后仍不生效，可以把悬浮View完全放到NavigationContainer的外层，两个组件平级渲染，彻底脱离导航容器的层级控制，修改后的代码如下：

  // App.tsx
  export default function App() {
    const navigationRef = useNavigationContainerRef();
    const [pageState, setPageState] = React.useState<NavigationState>();
  
    const handleGetInitialState = () => {
      setPageState(navigationRef.current?.getRootState());
    };
  
    return (
      <>
        <NavigationContainer
          ref={navigationRef}
          onReady={handleGetInitialState}
          onStateChange={(state) => setPageState(state)}
        >
          <RootNavigation />
        </NavigationContainer>
        {/* 悬浮View移到NavigationContainer外层 */}
        <View
          style={{
            position: 'absolute',
            height: 200,
            width: 200,
            top: 0,
            right: 0,
            backgroundColor: 'red',
            zIndex: 99999,
          }}
        />
      </>
    );
  }
  

• 补充说明：如果悬浮View需要使用导航能力，直接通过已经声明的navigationRef调用相关API即可，不会受View放置位置的影响。

内容的提问来源于stack exchange，提问作者İlker