android - 在 React Native 中确定是否在屏幕上绘制硬件按钮

Question

我在我的 React Native 应用程序 (RN 0.42) 中的 bottom: 0 处绘制了一个按钮。这在 iOS 和大多数 Android 设备上运行良好。但在没有物理硬件按钮的 Android 设备上，按钮栏绘制在屏幕上我按钮的正上方。

所以:在这种情况下，有没有办法检测硬件按钮是物理驱动还是软件驱动来调整我的布局？或者这只是 React Native 中的一个错误，因为这只发生在模态对话框中？

Nexus(绿色按钮的样式为:bottom: 45，硬件按钮呈现在屏幕上):

Galaxy S5:(这个设备有真正的硬件按钮，所以 bottom: 45 太多了):

Answer 1

它appears to be easy使用 Java 来确定 Android 设备是否有物理按钮，所以要在 React Native 中访问它，我会制作一个 Native Module包装器返回 ViewConfiguration.get(context).hasPermanentMenuKey() 的结果.

您可以打开 /android你在 Android Studio 中的 React Native 项目的目录，然后在 /app/src/main/java/<com.companyname.appname>/ 中文件夹，与您看到 MainActivity 的级别相同和 MainApplication文件，创建一个名为 detecthardware 的新 Android 资源目录(或任何其他适当的名称)。在其中创建 DetectHardwareModule.java 并包含以下内容:

package com.companyname.appname.detecthardware;

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

import java.util.List;

public class DetectHardwareModule extends ReactContextBaseJavaModule {

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

    @Override
    public String getName() {
        return "DetectHardware";
    }

    @ReactMethod
    public void hasHardwareButtons(final Callback callback) {
        callback.invoke(ViewConfiguration.get(getReactApplicationContext()).hasPermanentMenuKey());
    }
}

然后创建 DetectHardwarePackage.java 并包含以下内容:

package com.companyname.appname.detecthardware;

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 DetectHardwarePackage implements ReactPackage {
    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new DetectHardwareModule(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 中，您需要包含一个 getPackages 方法以便 JavaScript 代码可以访问它:

@Override
protected List<ReactPackage> getPackages() {
    return Arrays.<ReactPackage>asList(
        new MainReactPackage(),
        new DetectHardwarePackage()
    );
}

现在在 React Native 组件中，确保导入 NativeModules来自 react-native ，以及 Platform这样你就只能在 Android 上运行该功能。在 componentDidMount :

componentDidMount() {
    if (Platform.OS === 'android') {
        NativeModules.DetectHardware.hasHardwareButtons(function(result) {
            this.setState({hasHardwareButtons: result})
        }.bind(this));
    }
}

最后在您的 render 内函数，计算bottom如果平台是 android 且 hasHardwareButtons 为真，则为 0，否则为 45:

var bottom = (Platform.OS === 'android' && this.state.hasHardwareButtons) ? 0 : 45