React Native安卓游戏：如何展示Google Play游戏服务欢迎及成就弹窗？

Hey there! I've worked on similar React Native + Google Play Games Service integrations before, so let's break down how to get both popups working together on app launch when the user is logged in.

1. Native Android Setup for Google Play Games Welcome Popup #

First, make sure your Android project is already set up with Google Play Games Services (you've added dependencies to build.gradle, configured permissions/meta-data in AndroidManifest.xml, and linked your app to Google Play Console).

Step 1: Check Login Status & Trigger Welcome Popup #

In your MainActivity.java (or the Activity that hosts your RN app), add code to check if the user is already signed in, then show the welcome popup. We'll also send an event to RN once the popup is displayed to trigger the achievement modal.

import com.google.android.gms.auth.api.signin.GoogleSignIn;
import com.google.android.gms.auth.api.signin.GoogleSignInAccount;
import com.google.android.gms.games.Games;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.modules.core.DeviceEventManagerModule;

// Inside your MainActivity class
@Override
protected void onResume() {
    super.onResume();
    checkLoggedInAndShowWelcomePopup();
}

private void checkLoggedInAndShowWelcomePopup() {
    GoogleSignInAccount account = GoogleSignIn.getLastSignedInAccount(this);
    if (account != null) {
        Games.getGamesClient(this, account)
            .isAuthenticated()
            .addOnSuccessListener(isAuthenticated -> {
                if (isAuthenticated) {
                    // Show Google Play Games Welcome Popup
                    Games.getGamesClient(this, account)
                        .showWelcomePopup()
                        .addOnCompleteListener(task -> {
                            // Notify RN to show the achievement modal once welcome popup is ready
                            sendEventToRN("showAchievementModal", null);
                        });
                }
            });
    }
}

// Helper method to send events to React Native
private void sendEventToRN(String eventName, WritableMap params) {
    if (getReactInstanceManager().hasCurrentReactContext()) {
        getReactInstanceManager().getCurrentReactContext()
            .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
            .emit(eventName, params);
    }
}

Step 2: Ensure React Context is Ready #

The sendEventToRN method checks if the React Context is initialized before sending the event—this avoids crashes if RN hasn't fully loaded yet.

2. React Native Setup for Achievement Modal #

Now, we'll listen for the event from Native and trigger the navigation modal.

Step 1: Listen for Native Events #

In your root navigation component (or the screen where you want to trigger the modal), use DeviceEventEmitter to listen for the event sent from Android:

import React, { useEffect } from 'react';
import { DeviceEventEmitter } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const AppNavigator = () => {
    const navigation = useNavigation();

    useEffect(() => {
        // Subscribe to the native event
        const achievementModalSubscription = DeviceEventEmitter.addListener(
            'showAchievementModal',
            () => {
                // Navigate to your unlock achievement modal
                navigation.navigate('UnlockAchievementModal');
            }
        );

        // Clean up subscription on unmount
        return () => achievementModalSubscription.remove();
    }, [navigation]);

    // Your navigation container code here
    return (
        {/* ... your navigator setup ... */}
    );
};

export default AppNavigator;

Step 2: Verify Navigation Setup #

Make sure your navigation stack includes the UnlockAchievementModal as a modal screen (using presentation: 'modal' if you're using React Navigation v6+):

// Example stack navigator setup
import { createStackNavigator } from '@react-navigation/stack';

const Stack = createStackNavigator();

const AppStack = () => {
    return (
        <Stack.Navigator>
            <Stack.Screen name="Home" component={HomeScreen} />
            <Stack.Screen 
                name="UnlockAchievementModal" 
                component={UnlockAchievementModal}
                options={{ presentation: 'modal' }}
            />
        </Stack.Navigator>
    );
};

3. Key Considerations #

• Timing Coordination: By triggering the RN modal only after the Native welcome popup completes, you ensure both popups appear as intended (no race conditions where one covers the other).
• Login State Accuracy: Using isAuthenticated() with a success listener ensures we only show popups when the user is actually logged into Google Play Games.
• Navigation Readiness: If your navigation isn't fully initialized when the event is sent, add a check in RN (e.g., a isNavigationReady state) to delay triggering the modal until the nav is ready.

4. Debugging Tips #

• If the welcome popup doesn't show: Verify your Google Play Console setup (linked app, test users added) and check logcat for Google Play Games errors.
• If RN doesn't receive the event: Add logs in Native (Log.d("GPGS", "Sent event to RN")) and RN (console.log("Received showAchievementModal event")) to trace the flow.
• If navigation throws an error: Ensure the modal screen name matches exactly what you're using in navigation.navigate.

内容的提问来源于stack exchange，提问作者LIJU JOHN