持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第7天，点击查看活动详情

IOS

import { Linking }  from 'react-native'

Linking.openURL('app-settings:')
  .catch(err => console.log('error', err))

Android

1.新建两个文件夹

在android/app/src/main/java/com/projectname文件夹下新建opensettings文件夹，然后在此文件夹下新建两个文件：

• opensettings/OpenSettingsModule.java（模块功能）
• opensettings/openSettingsPacakge.java（注册模块）

2.OpenSettingsModule.java内容

package com.rojectname.opensettings; // 记得把<projectname>改为你的项目名称

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() {
    /**
     * return the string name of the NativeModule which represents this class in JavaScript
     * In JS access this module through React.NativeModules.OpenSettings
     */
    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());
    }
  }

  /* constructor */
  public OpenSettingsModule(ReactApplicationContext reactContext) {
    super(reactContext);
  }
}

3.openSettingsPacakge.java内容

package com.projectname.opensettings; // 记得把<projectname>改为你的项目名称

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();
  }
}

4.更改MainApplication.java文件

import com.probeproject.opensettings.*;// 还是要修改成自己项目名


 protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
+         packages.add(new OpenSettingsPackage());
          return packages;
        }

5.使用

import { NativeModules } from 'react-native';

function test(){
     NativeModules.OpenSettings.openNetworkSettings(data => {
      console.log('_____call back data', data)
    })
}

错误解决

如果编译成功之后，NativeModules.OpenSettings.openNetworkSettings方法显示# null is not an object。

那么也许这样可以解决。

用Android studio打开我们的根项目下的 android 文件夹，然后再Rebuild project一下，将生成的 apk包进行安装，再打开，就不会有上面的问题了。

综合使用代码

import { Platform, Linking, NativeModules } from 'react-native';
// 跳转到系统应用设置页面
export const openSystemSetting = () => {
    if (Platform.OS === "ios") {
        const url = 'app-settings:'
        Linking.canOpenURL(url)
        .then((supported) => { 
          if (!supported) {
            console.log('Can\'t handle url: ' + url);
          } else {
            return Linking.openURL(url)
          }
        })
      } else {
        NativeModules.OpenSettings.openNetworkSettings(data => {
          console.log('_____call back data', data)
        })
      }
     
}