react navigation实现透明弹窗

Posted 2022-04-23 xiangzhihong8

在React Native开发中，如果要实现弹窗效果，通常的方案是使用官方的Modal组件。不过，官方的Modal组件会有一些缺陷，比如在android端无法全屏显示，而在ios端中，当打开一个新的ViewController时会被Modal 组件给覆盖掉等。因此，在React Native应用开发中，为了屏蔽这些兼容性问题，我们可以使用react-native-root-siblings插件提供的RootSiblings组件来实现。

事实上，RootSiblings组件是对官方Modal组件的进一步的封装，能够有效的解决Modal组件的一些显示问题，使用方式也和Modal组件差不多，如下所示。

import RootSiblings from \'react-native-root-siblings\';

const alertShare = (onItemPress, onCancel, title) => 
  if (global.siblingShare) 
    global.siblingShare.destroy();
    onCancel();
    global.siblingShare = undefined;
   else 
    global.siblingShare = new RootSiblings( (
        <SharePanel
          onItemPress=onItemPress
          onCancel=onCancel
          title=title/>
      ) ); 
;

//调用分享方法
alertShare(onItemPress, () => 
   startAnimation(setShow(false));
)

可以看到，只需要使用