مشكلة Linking في React Native

عمر سالم2 · 24 مارس 2021

احاول كتابة كود للتأكد مما اذا كان الهاتف متصل بالانترنت، وان لم يكن، اريد فتح شاشة الاعدادات.

componentWillMount(){
  Linking.canOpenURL('app-settings:')
    .then(supported => {
    if (!supported) {
      console.log('Not supported URL: ' + url);
    } else {
      return Linking.openURL('app-settings:');
    }
  }).catch(err => console.error('ERROR:', err));
}

احصل على الخطأ:

Not supported URL: app-settings

إسلام عبدالعزيز · 24 مارس 2021

عليك بكتابة Native Module مخصص بداخل مجلد الـ android، على سبيل المثال، OpenSettingsModule.java بداخل android/app/src/main/java/com/<projectname>/opensettings.

لا تنسى عمل register لهذا الـ module بداخل OpenSettingsPackage.java.

سنقوم بكتابة الكود التالي بداخل OpenSettingsModule.java:

package com.<projectname>.opensettings;

import android.app.Activity;
import android.content.Intent;

import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.ReactContextBaseJavaModule;

public class OpenSettingsModule extends ReactContextBaseJavaModule {

  @Override
    public String getName() {
    /**
     * .سيكون هذا اسم الوحدة التي سننشئها
     *
     * import { NativeModules } from 'react-native';
     *
     * NativeModules.OpenSettings.openNetworkSettings( ... );
     */
    return "OpenSettings";
  }

  @ReactMethod
    public void openNetworkSettings(Callback cb) {
    Activity currentActivity = getCurrentActivity();

    if (currentActivity == null) {
      cb.invoke(false);
      return;
    }

    try {
      currentActivity.startActivity(new Intent(android.provider.Settings.ACTION_SETTINGS));
      cb.invoke(true);
    } catch (Exception e) {
      cb.invoke(e.getMessage());
    }
  }

  public OpenSettingsModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }
}

الآن علينا تسجيل هذه الوحدة بداخل OpenSettingsPackage.java لنستطيع استخدامها:

package com.<projectname>.opensettings;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class OpenSettingsPackage implements ReactPackage {
  @Override
  public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
    List<NativeModule> modules = new ArrayList<>();

    modules.add(new OpenSettingsModule(reactContext));

    return modules;
  }

  @Override
  public List<Class<? extends JavaScriptModule>> createJSModules() {
    return Collections.emptyList();
  }

  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return Collections.emptyList();
  }
}

قبل الاستعمال، علينا توفير الحزمة بداخل MainApplication.java هكذا:

import com.<projectname>.opensettings.*;

  @Override
  protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
    new MainReactPackage(),
    new OpenSettingsPackage() /* .هذه هي الوحدة التي قمنا بكتابتها */
  );
}

والآن، قم باستعماله بداخل React Native هكذا:

import { NativeModules } from 'react-native';

function App() {
	const openSettings() {
		NativeModules.OpenSettings.openNetworkSettings(data => {});
	}

	return (
		<View>
			<Text onPress={openSettings}>Open Settings</Text>
		</View>
	);
}