如何结合配置文件发布React Native移动端构建产物？

Hey there! Awesome that you’re aligning your React Native + web project with the 12-factor app’s build/release/run separation—this is such a good practice for scalable, maintainable deployments. Let’s walk through your options, starting with your ideal scenario and working down to the fallback approaches.

Your top goal—having compiled platform artifacts read and process config files post-build—is totally achievable with a bit of native code glue. Here’s how to pull it off for each platform:

Android #

• Build Phase: Generate a generic AAB/APK that includes a placeholder config file in the assets directory (e.g., config.json) and native code to read this file.
• Release Phase: Replace the placeholder config.json with the environment-specific version. You can use tools like bundletool for AABs or aapt for APKs to swap out assets without recompiling the entire app.
• React Native Integration: Write a simple native module that uses AssetManager to read the config.json file, then expose its contents to your JS code via a bridge method.

iOS #

• Build Phase: Create a generic IPA that includes a blank config.json in the app bundle (add it to your Xcode project’s "Copy Bundle Resources" build phase) and native code to read it.
• Release Phase: Unzip the IPA, replace config.json in the Payload/YourApp.app directory, then re-zip and re-sign the IPA (tools like Fastlane can automate this).
• React Native Integration: Build a native module that reads the JSON file from the app bundle using NSBundle, then pass the parsed config to your JS layer.

React Native Web Alignment #

For web, you can keep things simple by placing environment-specific config.json files in your public directory. Create a shared useConfig hook or config.js utility that:

• On web: Imports the config.json directly (or fetches it, if you prefer)
• On mobile: Calls your native module to get the config

This way, your JS code uses a unified interface regardless of the platform.

If writing native modules feels intimidating, you can still separate build and release by keeping your source code and dependencies in the build artifact, then injecting config at release time via compilation:

• Build Phase: Generate a "base build package" that includes all your React Native source, native platform code, and dependencies—but no environment-specific config.
• Release Phase:
  • Android: Use Gradle properties or environment variables to inject config values into BuildConfig constants or strings.xml. Then recompile the AAB/APK with ./gradlew assembleRelease.
  • iOS: Use Xcode config files (xcconfig) or environment variables to inject values into Info.plist or custom compiler macros. Recompile the IPA with xcodebuild.
  • React Native: Use libraries like react-native-config to load environment-specific .env files at release time, then regenerate your JS bundle (or let Metro inline the values during compilation).

This approach avoids native code but adds a recompilation step to your release pipeline—still compliant with 12-factor, just a bit slower than the ideal scenario.

If you need to get up and running quickly, this is the simplest option:

• Build Phase: Create a generic build artifact that includes code to fetch config from a remote endpoint (e.g., a simple HTTP API that returns environment-specific JSON).
• Release Phase: No changes to the artifact—just ensure the config endpoint is available for the target environment.
• App Flow: When your app launches, fetch the config first, cache it locally (for offline use), then initialize your app with the fetched values. Add a loading screen or fallback config to handle network failures.

This is fully 12-factor compliant (config is fetched at runtime, build/release artifacts are environment-agnostic) but has the downside of a slight startup delay and dependency on an external config service.

• Cross-Platform Config: react-native-config is a great library for unifying config injection across Android, iOS, and web (it works with .env files and can expose values to both native and JS layers).
• Release Automation: Fastlane has built-in actions to handle config replacement, re-signing, and deployment for both Android and iOS—this will save you tons of manual work in the release phase.
• React Native Web: For web, you can use dotenv-webpack to inject environment variables during the build, but if you want to stick to runtime config, just fetch a config.json file from your web server’s public directory.

Don’t worry about being new to mobile build/deployment—these are standard patterns that teams use all the time to align with 12-factor principles. Start with the fallback that feels most approachable, then iterate to the ideal scenario as you get more comfortable with mobile tooling.

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