React Native中如何实现点击按钮返回安卓设备主屏幕？

RN 框架本身没有封装跳转到安卓系统主屏幕的API，你需要通过安卓原生模块封装系统Intent能力实现，以下是无额外依赖的实现方法：

1. 封装安卓原生模块 #

1.1 新建功能模块类 #

在安卓项目路径android/app/src/main/java/[你的应用包名]/下新建HomeModule.java文件，写入以下代码：

import android.content.Intent;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class HomeModule extends ReactContextBaseJavaModule {
    public HomeModule(ReactApplicationContext reactContext) {
        super(reactContext);
    }

    @Override
    public String getName() {
        // 该名称为RN侧调用时的模块名，无需修改
        return "HomeModule";
    }

    @ReactMethod
    public void goToSystemHome() {
        // 构造返回系统主屏幕的Intent
        Intent homeIntent = new Intent(Intent.ACTION_MAIN);
        homeIntent.addCategory(Intent.CATEGORY_HOME);
        homeIntent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
        getReactApplicationContext().startActivity(homeIntent);
    }
}

1.2 注册原生模块 #

同路径下新建HomePackage.java文件，写入以下代码完成模块注册：

import com.facebook.react.ReactPackage;
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 HomePackage implements ReactPackage {
    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
        return Collections.emptyList();
    }

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> moduleList = new ArrayList<>();
        moduleList.add(new HomeModule(reactContext));
        return moduleList;
    }
}

1.3 引入注册包 #

找到android/app/src/main/java/[你的应用包名]/MainApplication.java文件，在getPackages方法中添加刚才创建的注册包：

@Override
protected List<ReactPackage> getPackages() {
    List<ReactPackage> packages = new PackageList(this).getPackages();
    // 新增这一行引入自定义模块
    packages.add(new HomePackage());
    return packages;
}

2. RN侧调用实现 #

在你需要添加按钮的组件中引入NativeModules，调用封装好的方法即可：

import { Button, NativeModules, Platform } from 'react-native';

const GoHomeButton = () => {
  const handlePress = () => {
    if (Platform.OS === 'android') {
      NativeModules.HomeModule.goToSystemHome();
    }
  };

  return (
    <Button 
      title="返回系统主屏幕"
      onPress={handlePress}
    />
  );
};

export default GoHomeButton;

注意事项 #

iOS系统没有对外公开跳转到系统主屏幕的官方API，普通上架App Store的应用无法实现该功能，只有安卓端支持该能力。

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