React-Native:无法从我的Android应用程序打开设备设置

我正在使用React-Native(^ 0.35.0)来制作Android应用程序.在某种情况下,我需要检查是否存在互联网连接.如果没有互联网连接,那么我需要显示一个按钮,该按钮将打开设备设置(用户可通过该设置启用其连接).

我正在使用react-native提供的链接库.

我正在尝试以下方式:

componentWillMount(){
    Linking.canOpenURL('app-settings:')
      .then(supported => {
        if (!supported) {
          console.log('Can\'t handle url: ' + url);
       } else {
       return Linking.openURL('app-settings:');
      }
  }).catch(err => console.error('An error occurred', err));
}

然后上面的代码给出 - 控制台无法处理url:app-settings:

当我尝试以下时:

componentWillMount(){
    Linking.canOpenURL('app-settings:')
      .then(supported => {
        return Linking.openURL('app-settings:');
      }).catch(err => console.error('An error occurred', err));
    }

上面的代码给出了 - 错误:无法打开 URL'app -settings:':找不到处理Intent的Activity {act = android.intent.action.VIEW dat = app-settings:flg = 0x10000000}

这里有什么我想念的吗？或是否需要更改任何其他文件,如AndroidMainfest.xml,MainActivity.java等.

我是反应原生的新手,并没有太多的见解java(android).我遇到了类似的问题,但我设法通过创建自定义react-native模块来打开Android设置.

以下是我为实现此功能而采取的步骤.

1 - 为模块下的文件创建一个文件夹android/app/src/main/java/com//.在这种情况下,我已经创建了该opensettings文件夹.

2 - 在此文件夹下创建模块文件OpenSettingsModule.java(我们放置模块功能)和包文件OpenSettingsPackage.java(我们将在其中注册我们的模块).

3 - 将以下代码放入OpenSettingsModule.java

package com..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() {
    /**
     * 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..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 createNativeModules(ReactApplicationContext reactContext) {
    List modules = new ArrayList<>();

    modules.add(new OpenSettingsModule(reactContext));

    return modules;
  }

  @Override
  public List> createJSModules() {
    return Collections.emptyList();
  }

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

5 - 提供此包的getPackages方法MainApplication.java.

import com..opensettings.*;
...
@Override
protected List getPackages() {
  return Arrays.asList(
      new MainReactPackage(),
      new OpenSettingsPackage() /* <---- add here */
  );
}

6 - 我们完成了JAVA部分,NativeModules在您的组件中导入,我们现在可以访问我们的模块了NativeModules.OpenSettings.JSX实现如下.

import { NativeModules } from 'react-native'; 

export default class App extends Component {
  constructor(props) {
    super(props);
    this.openSettings = this.openSettings.bind(this);
  }

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

  render() {
    return (
      
        Open Android Settings
      
    );
  }
}   

7 - 参考

https://shift.infinite.red/native-modules-for-react-native-android-ac05dbda800d#.yj9pspfpn http://facebook.github.io/react-native/docs/native-modules-android.html

注意:如果有更好的方法来实现相同的功能,请在这里告诉我.

我使用了相同的步骤来打开设备网络运营商设置.上面的步骤非常有用.

这是我的代码.

package com..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() {
    /**
     * 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());
    }
  }


  /*This is for open location Settings*/
  @ReactMethod
  public void openLocationSettings(Callback cb) {
    Activity currentActivity = getCurrentActivity();

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

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

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

您需要做的就是将常量(如ACTION_NETWORK_OPERATOR_SETTINGS)放在上面的代码中,并创建自己的函数,就像上面创建的函数一样,即openNetworkSettings.其他步骤4,5和6是相同的.

以下是常量列表: https ://developer.android.com/reference/android/provider/Settings.html