关于前端: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( (
        <SharePanel
          onItemPress={onItemPress}
          onCancel={onCancel}
          title={title}/>
      ) ); }
};

//调用分享办法
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 (
        <>
            <NavigationContainer ref={navigationRef}>
                <RootStack.Navigator mode="modal" initialRouteName="Main">
                    <RootStack.Screen
                        name="Main"
                        component={MainStackScreen}
                        options={{headerShown: false}} />
                    <RootStack.Screen
                        name="MyModal"
                        component={ModalScreen}
                        options={{
                            headerShown: false,
                            cardStyle: {
                                backgroundColor: 'transparent',
                                shadowColor:'transparent'
                            },
                            cardStyleInterpolator: ({current: {progress}}) => {
                                return {
                                    overlayStyle: {
                                        opacity: progress.interpolate({
                                            inputRange: [0, 1],
                                            outputRange: [0, 0.5],
                                            extrapolate: 'clamp',
                                        }),
                                    },
                                }
                            },
                        }}
                    />
              
                </RootStack.Navigator>
            </NavigationContainer>
        </>
    );
};

export default Navigator;

能够看到，为了应用路由的形式实现通明成果，咱们在配置RootStack.Screen的options参数，特地须要留神cardStyle和cardStyleInterpolator两个参数，倡议间接将options外面的内容能够间接拷贝过来。接下来就是ModalsScreen.js的代码：

const ModalStack = createStackNavigator()

export default function ModalsScreen() {
    return (
        <ModalStack.Navigator headerMode='none'>
            <ModalStack.Screen name='ShopingCartScreen' component={ShopingCartScreen} options={{
                headerShown: false,
                cardStyle: { backgroundColor: 'transparent' },
                cardOverlayEnabled: true,
            }}/>
        </ModalStack.Navigator>
    )
}

除了须要将ModalScreen的背景设置为通明外，还须要将具体的业务页面的背景也设置为通明。能够看到，在下面的代码中，咱们将ShopingCartScreen页面的背景也设置为了通明。接下来，在须要跳转的中央应用navigate执行跳转即可。

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

接下来就能够看到成果了。

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