在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中屏幕的通明背景