react navigation实现透明弹窗

在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( (
        
      ) ); }
};

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

可以看到，只需要使用RootSiblings组件包裹需要分享的内容即可完成分享功能。

除此之外，我们还可以使用react navigation来实现购物车弹窗，原理是react navigation的路由页面背景的透明化。下面直接上代码，如果还不清楚React Navigation使用的，可以参考React Navigation 5.x基本使用，最新的6.x版本使用方式大体类似。

首先，我们来看一下navigation的index.js的代码。

const RootStack = createStackNavigator();

const Navigator = () => {
    return (
        <>
            
                
                    
                     {
                                return {
                                    overlayStyle: {
                                        opacity: progress.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, 0.5],
                                            extrapolate: 'clamp',
                                        }),
                                    },
                                }
                            },
                        }}
                    />
              
                
            
        
    );
};

export default Navigator;

可以看到，为了使用路由的方式实现透明效果，我们在配置RootStack.Screen的options参数，特别需要注意cardStyle和cardStyleInterpolator两个参数，建议直接将options里面的内容可以直接拷贝过去。接下来就是ModalsScreen.js的代码：

const ModalStack = createStackNavigator()

export default function ModalsScreen() {
    return (
        
            
        
    )
}

除了需要将ModalScreen的背景设置为透明外，还需要将具体的业务页面的背景也设置为透明。可以看到，在上面的代码中，我们将ShopingCartScreen页面的背景也设置为了透明。接下来，在需要跳转的地方使用navigate执行跳转即可。

navigate('MyModal', {screen: 'ShopingCartScreen'})

接下来就可以看到效果了。

参考：
react navigation透明背景实现
React Navigation5.x中屏幕的透明背景