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

Question

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

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

Nexus(绿色按钮具有样式:bottom: 45并且硬件按钮在屏幕上呈现):

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

Answer 1

这似乎是很容易使用Java来确定的Android设备是否有物理按键,所以在本地做出反应我会做一个访问本机模块封装器返回的结果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