react-native 打开设置界面

最新推荐文章于 2024-09-10 07:52:18 发布

原创最新推荐文章于 2024-09-10 07:52:18 发布 · 844 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react native #android #react.js

react-native 专栏收录该内容

35 篇文章

订阅专栏

博客介绍了iOS和Android打开设置的方法。iOS使用Linking组件即可，而Android则需在特定文件夹下创建模块文件和包文件，编写相应代码实现模块功能，注册模块后，可在react native中调用以打开设置。

iOS打开设置还是比较简单的，使用Linking组件即可：

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

Android

1、在android/app/src/main/java/com//文件夹下创建opensettings文件夹 2、在这个文件夹下创建模块文件OpenSettingsModule.java（模块功能）和包文件OpenSettingsPackage.java（注册我们的模块）。 3、在OpenSettingsModule.java文件中，代码如下：

package com.<projectname>.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);
  }
}

4、上面的模块功能可以通过调用openNetworkSettings函数打开android设置。现在我们需要注册这个模块。在OpenSettingsPackage.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();
  }
}

5、把包提供到MainApplication.java文件的getPackages方法中：

import com.<projectname>.opensettings.*; // 还是要修改成自己项目名
...
@Override
protected List<ReactPackage> getPackages() {
  return Arrays.<ReactPackage>asList(
      new MainReactPackage(),
      new OpenSettingsPackage() /* <---- add here */
  );
}

6、在reactnative中调用

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