关于前端: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 中屏幕的通明背景