React Native 0.54+自定义OkHttp客户端使用及自签名证书图片加载问题

Let's tackle your two main issues step by step:

1. Fixing Image Loading Failure with Self-Signed Certificates #

Since self-signed certificates aren't trusted by default system roots, we need to configure React Native to trust your specific certificate (or temporarily bypass checks for testing—never do this in production).

Android Implementation #

Option 1: Trust Your Specific Self-Signed Certificate (Production-Safe)

1. Place your certificate file (e.g., my_cert.crt or my_cert.pem) in android/app/src/main/res/raw (create the raw folder if it doesn't exist).
2. Add certificate trust logic to your custom OkHttp client (we'll tie this into the next section's custom client setup).

Option 2: Temporary Unsafe Bypass (Testing Only!)

If you just need to test quickly, you can disable certificate validation entirely (again, don't ship this):

// Add this to your custom OkHttp builder (see section 2)
OkHttpClient.Builder unsafeBuilder = OkHttpClientProvider.createClientBuilder()
    .sslSocketFactory(getUnsafeSslSocketFactory(), getUnsafeTrustManager())
    .hostnameVerifier((hostname, session) -> true);

// Helper methods for unsafe validation
private SSLSocketFactory getUnsafeSslSocketFactory() {
    try {
        TrustManager[] trustAllCerts = new TrustManager[]{getUnsafeTrustManager()};
        SSLContext sslContext = SSLContext.getInstance("SSL");
        sslContext.init(null, trustAllCerts, new SecureRandom());
        return sslContext.getSocketFactory();
    } catch (Exception e) {
        throw new RuntimeException(e);
    }
}

private X509TrustManager getUnsafeTrustManager() {
    return new X509TrustManager() {
        @Override
        public void checkClientTrusted(X509Certificate[] chain, String authType) {}
        @Override
        public void checkServerTrusted(X509Certificate[] chain, String authType) {}
        @Override
        public X509Certificate[] getAcceptedIssuers() { return new X509Certificate[]{}; }
    };
}

iOS Implementation #

1. Add your self-signed certificate to your Xcode project, and make sure it's included in Build Phases > Copy Bundle Resources.
2. Update your Info.plist to allow insecure loads for your target domain (this is the safest approach for testing/production with self-signed certs):

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>10.0.1.10</key>
        <dict>
            <key>NSExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSIncludesSubdomains</key>
            <true/>
        </dict>
    </dict>
</dict>

2. Using a Custom OkHttp Client in React Native 0.54+ #

Starting with RN 0.54, the official way to customize the OkHttp client is by implementing a custom OkHttpClientFactory and registering it in your app's Application class. Here's how:

Step 1: Create the Custom Factory Class #

Create a new Java class in android/app/src/main/java/[your/package]/ (e.g., CustomOkHttpClientFactory.java):

import com.facebook.react.modules.network.OkHttpClientFactory;
import com.facebook.react.modules.network.OkHttpClientProvider;
import okhttp3.OkHttpClient;
import okhttp3.Interceptor;

public class CustomOkHttpClientFactory implements OkHttpClientFactory {
    @Override
    public OkHttpClient createNewNetworkModuleClient() {
        // Start with the default RN client builder
        OkHttpClient.Builder builder = OkHttpClientProvider.createClientBuilder();

        // Add custom interceptors (example: add a custom header)
        Interceptor customInterceptor = chain -> {
            return chain.proceed(
                chain.request().newBuilder()
                    .addHeader("X-Custom-Header", "MyCustomValue")
                    .build()
            );
        };
        builder.addInterceptor(customInterceptor);

        // Add your self-signed certificate trust logic here (from section 1)
        // builder.sslSocketFactory(...).hostnameVerifier(...);

        return builder.build();
    }
}

Step 2: Register the Factory in Your Application Class #

Update your MainApplication.java to register the custom factory on app launch:

import android.app.Application;
import com.facebook.react.ReactApplication;
import com.facebook.react.modules.network.OkHttpClientProvider;

public class MainApplication extends Application implements ReactApplication {
    @Override
    public void onCreate() {
        super.onCreate();
        // Register your custom OkHttp client factory
        OkHttpClientProvider.setOkHttpClientFactory(new CustomOkHttpClientFactory());
    }

    // Keep your existing ReactApplication implementation code here
}

Step 3: Verify Manifest Configuration #

Ensure your AndroidManifest.xml points to your custom MainApplication class:

<application
    android:name=".MainApplication"
    <!-- Other existing attributes -->
>

Key Notes #

• Production Safety: Always use the specific certificate trust method instead of disabling validation entirely—unsafe bypasses expose your app to man-in-the-middle attacks.
• Third-Party Libraries: If you're using libraries like react-native-fast-image, they'll typically reuse RN's default OkHttp client, so your custom configuration should apply automatically.

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