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中螢幕的透明背景

react navigation實現透明彈窗

相關文章