React Native移动端应用实现环境感知式域名切换的最佳方案

Absolutely! There are several straightforward, maintainable ways to let your app auto-detect its environment and use the correct domain without manual edits to config.js. Here are the most practical methods for your setup:

1. Use Environment Variables + Build Scripts (Great for React Native/Web) #

This approach injects environment-specific values at build time, so your app uses the right domain from the start.

Step 1: Set up environment files #

Create separate files for each environment (e.g., .env.test and .env.prod):

# .env.test
DOMAIN=testing-server.herokuapp.com

# .env.prod
DOMAIN=actualWebsite.com

Step 2: Add build scripts #

For React Native, use react-native-config to load the appropriate env file via build commands. Update your package.json:

{
  "scripts": {
    "build:test": "ENVFILE=.env.test react-native run-ios --configuration Release",
    "build:prod": "ENVFILE=.env.prod react-native run-ios --configuration Release"
  }
}

Step 3: Access the domain in config.js #

Pull the domain directly from the environment variable:

// config.js
import Config from 'react-native-config';

export const domain = Config.DOMAIN;

2. Xcode Scheme + Native Environment Detection (iOS-Specific) #

Since you’re using TestFlight, leverage Xcode’s schemes to distinguish build types, then expose that info to your JS code.

Step 1: Create Xcode Schemes #

Set up 3 dedicated schemes:

• Debug (for local device debugging)
• TestFlight (for TestFlight submissions)
• Production (for App Store releases)

Step 2: Add Preprocessor Macros #

For each scheme, go to Build Settings > Preprocessor Macros and add:

• Debug: DEBUG=1
• TestFlight: TESTFLIGHT=1
• Production: PRODUCTION=1

Step 3: Map to JS #

Create a simple native module or use react-native-config to pass environment status to JS. Then update config.js:

// config.js
import { NativeModules } from 'react-native';

const { AppEnvironment } = NativeModules;

let domain;
if (AppEnvironment.isDebug || AppEnvironment.isTestFlight) {
  domain = 'testing-server.herokuapp.com';
} else {
  domain = 'actualWebsite.com';
}

export default { domain };

3. Runtime Environment Check (Quick & Dirty) #

For a no-setup React Native option, use the built-in __DEV__ variable for local debugging, and check the app receipt for TestFlight:

// config.js
import { Platform, NativeModules } from 'react-native';

async function getDomain() {
  let isTestFlight = false;
  
  if (Platform.OS === 'ios') {
    // Check if we're in TestFlight
    isTestFlight = await NativeModules.AppUtils.isTestFlight();
  }

  return (__DEV__ || isTestFlight) 
    ? 'testing-server.herokuapp.com' 
    : 'actualWebsite.com';
}

// Cache the domain to avoid repeated checks
export const domain = await getDomain();

Add this iOS native code to handle the TestFlight check:

// AppUtils.m
#import "AppUtils.h"

@implementation AppUtils

RCT_EXPORT_MODULE();

RCT_EXPORT_METHOD(isTestFlight:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject) {
  BOOL isTestFlight = [[[NSBundle mainBundle] appStoreReceiptURL] lastPathComponent] isEqualToString:@"sandboxReceipt"];
  resolve(@(isTestFlight));
}

@end

Key Notes #

• Always test each build type (local, TestFlight, production) to confirm the correct domain is used.
• Avoid hardcoding fallback domains—rely on environment variables or native checks for maintainability.
• For web apps, similar logic works with tools like dotenv and build scripts (e.g., npm run build:prod vs npm run build:test).

Pick the method that fits your workflow best—all of these eliminate the hassle of manually editing config.js before every deployment!

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