FR9.0 Android虚拟键的适配

9.0App的时候很多布局的大小都是通过计算屏幕宽高、状态栏高度、工具栏高度等计算得到的，这种计算方法在可动态显示或隐藏虚拟按键的Android手机的显示上会有问题，最典型的有以下情况：

1.虚拟键显示时，打开全屏界面（如扫码、批注等界面），隐藏虚拟键未填充界面，会留白。

隐藏虚拟键留白

隐藏虚拟键未填充屏幕

2.先隐藏虚拟键再展开时，app底部或者右侧可能会被遮挡。

页面被遮挡

一般采用自适应宽高的View不受影响，比如设置flex:1，这类视图会根据屏幕有效区域自动刷新。
但某些布局会有特殊要求，使用具体的宽高作为属性，就需要考虑到虚拟键的因素。

解决方法

解决思路：

首先原生监听虚拟按键的变化，计算出去除虚拟键尺寸后屏幕的可用宽高，然后将宽高发送给RN端。
RN端更新实际可用的屏幕尺寸，最后去通知各个需要适配虚拟键的页面进行更新。

去除虚拟键的区域

获得实际虚拟键的高度

/**
     * 获取虚拟键高度(无论是否隐藏)
     * @param context
     * @return
     */
    public static int getNavigationBarHeight(Context context){
        int result = 0;
        int resourceId = context.getResources().getIdentifier("navigation_bar_height","dimen", "android");
        if (resourceId > 0) {
            result = context.getResources().getDimensionPixelSize(resourceId);
        }
        return result;
    }

/**
     * 虚拟按键是否打开
     * @param activity
     * @return
     */
    public static boolean isNavigationBarShown(Activity activity){
        //虚拟键的view,为空或者不可见时是隐藏状态
        View view  = activity.findViewById(android.R.id.navigationBarBackground);
        if(view == null){
            return false;
        }
        int visible = view.getVisibility();
        if(visible == View.GONE || visible == View.INVISIBLE){
            return false ;
        }else{
            return true;
        }
    }

/**
     * 获取当前虚拟键高度(隐藏后高度为0)
     * @param activity
     * @return
     */
    public static int getCurrentNavigationBarHeight(Activity activity){
        if(isNavigationBarShown(activity)){
            return getNavigationBarHeight(activity);
        }else{
            return 0;
        }
    }

计算屏幕可用宽高（去除虚拟键显示高度）

/**
     * 获取可用屏幕高度，排除虚拟键
     * @param context 上下文
     * @return 返回高度
     */
    public static int getContentHeight(Activity context){
        int contentHeight;
        if(isPortrait(context)){
            contentHeight = getRealScreenHeight(context) - getCurrentNavigationBarHeight(context);
        }else{
            contentHeight = getRealScreenHeight(context);
        }
        return contentHeight;
    }

    /**
     * 获取可用屏幕宽度，无论是否有虚拟键
     * @param context 上下文
     * @return 返回高度
     */
    public static int getContentWidth(Activity context){
        int contentWidth;
        if(isLandScape(context)){
            contentWidth = getRealScreenWidth(context) - getCurrentNavigationBarHeight(context);
        }else{
            contentWidth = getRealScreenWidth(context);
        }
        return contentWidth;
    }

监听虚拟键的变化，并将最新屏幕可用宽高传给RN

    //监听虚拟键变化
    @Override
    public void onGlobalLayout() {
        if (!mLayoutComplete){
            return;
        }
        Activity activity  = getCurrentActivity();
        if(activity == null){
            return;
        }
        //严格保证是虚拟键的变化引起的onGlobalLayout时才去通知RN
        if(IFAppUtils.isNavigationShow() != DeviceUtils.isNavigationBarShown(activity)){
            updateContentSize();
        }
        IFAppUtils.setIsNavigationShow(DeviceUtils.isNavigationBarShown(activity));
    }

//发送消息给RN
private void updateContentSize(boolean navigationBarChanged){
     WritableMap writableMap = Arguments.createMap();
     writableMap.putInt("width", getCurrentActivity() == null ? 0 : DeviceUtils.getContentWidth(getCurrentActivity()));
     writableMap.putInt("height", getCurrentActivity() == null ? 0 : DeviceUtils.getContentHeight(getCurrentActivity()));
     writableMap.putBoolean("navigationBarChanged", navigationBarChanged);
     context.getJSModule(RCTNativeAppEventEmitter.class).emit(SCREENSIZE_CHANGE, writableMap);
}

4.RN端需要适配虚拟键的按钮要先注册监听：

addScreenSizeChangeListener(key, listener){
    if(deviceType.android()){
         screenChangeListenerMap.set(key,listener);
    }
},

removeScreenSizeChangeListener(key) {
     if(deviceType.android()) {
         screenChangeListenerMap && screenChangeListenerMap.delete(key);
     }
},

5.RN端接收虚拟键变化的消息，然后去通知所有注册过的页面去刷新布局。

if(platform.isAndroidPlatform()){
    let eventEmitter = new NativeEventEmitter(NativeModules.FCTScreenManager);
    eventEmitter.addListener(SCREENSIZE_CHANGE,(sizeInfo)=>{
        let newWidth = sizeInfo.width / PixelRatio.get();
        let newHeight = sizeInfo.height / PixelRatio.get();
        let navigationBarChanged = sizeInfo.navigationBarChanged;
        //布局改变，更新布局
        screenWidth = newWidth;
        screenHeight = newHeight;
        //是虚拟键引起的布局变化    
        if(navigationBarChanged){
             screenChangeListenerMap.forEach((value, key)=>{
                 let listener = screenChangeListenerMap.get(key);
                listener && listener();
         });
        }
    });
}

6.刷新布局

componentDidMount(){
    Device.addScreenSizeChangeListener(GUIDE, ()=>{
        this._guideUI.forceUpdate();
    });
}

componentWillUnmount() {
     Device.removeScreenSizeChangeListener(GUIDE);
}

通过上述方法，可以适配绝大多数页面的虚拟键问题。但仍然有一些特殊情况需要特殊处理。

特殊情况1：

在CommonView/OfflinePage(常用页/离线页)展开虚拟键，列表被挤压成两列。因为每项的宽度是屏幕宽度的1/3,虚拟键展开后显示不下被挤压成两行。

常用页

页面添加了虚拟键监听，虚拟键变化后执行了forceUpdate()方法，重新计算每个item宽度进行绘制，但此时列表并没有重新绘制：

componentDidMount() {
   Device.addScreenSizeChangeListener(OFFLINE_PAGE, ()=>{
         //重新渲染
         this.forceUpdate();
   })
}

几经调试之后，发现ListView会判断每行当前数据和之前的数据是否有相同，如果完全相同，则不会重新执行renderRow()方法。为了解决此问题，需要重新定义ListView的DataSource：

static getNewDataSource(): Object {
        return new SwipeableListViewDataSource({
            getRowData: (data, sectionID, rowID) => data[sectionID][rowID],
            getSectionHeaderData: (data, sectionID) => data[sectionID],
            //之前是row1!==row2
            rowHasChanged: (row1, row2) => true,
            sectionHeaderHasChanged: (s1, s2) => s1 !== s2
        });
    }

<List
     ref={ref => this._view = ref}            
     ds={OfflinePage.getNewDataSource()}
/>

特殊情况2：

pad的二级目录页，同样在虚拟键变化之后执行forceUpdate()方法刷新目录的整个控件，但刷新之后，目录的位置会出现偏差，可能左右偏移。

目录位置偏移

调试发现pad二级目录初始位置在屏幕外，展示是通过动画移动到屏幕显示区域，最终从屏幕外展示到屏幕内。动画的最终位置计算是通过屏幕尺寸等一系列参数进行计算的。由于屏幕的尺寸在虚拟键变化后发生了变化，动画的最终位置计算不准，导致目录页显示位置有偏差。
解决方法是，在二级目录展示并且目录更新之后，需要重新执行动画调整目录最终的位置。

componentDidUpdate() {
 if(this.state.showSide){
     this._subView.transitionTo({
        translateX: - (this._width - this._rowWidth)
     }, 0)
  }
}

关于报表页面的虚拟键适配：

问题1：

放大报表时，虚拟键变化，RN计算报表的缩放系数传给原生重新绘制，导致报表恢复原本大小。

解决方法：

判断是否是虚拟键变化导致的报表重新绘制，并将该字段传递给原生代码。

Device.addScreenSizeChangeListener(SINGLE_PAGE_VIEW,()=>{
       this.causeByNavigationBarChanged = true;
});

UIManager.dispatchViewManagerCommand(
    ReactNative.findNodeHandle(this.reportRef),
    UIManager.FCTReportView.Commands.setGridZoomScale,
    paramsArray
);

原生如果是虚拟键导致的放大系数改变，则只保存放大缩放，不会真的进行缩放。如果不是虚拟键导致的放大系数改变，则进行缩放。

public void setGridZoomScale(float scale, float maxScale, float minScale, boolean causeByNavigationBarChanged) {
    this.maxScale = maxScale;
    this.minScale = minScale;
    //虚拟键变化导致缩放系数的变化时不进行缩放，只保存缩放系数
    if(!causeByNavigationBarChanged){
         scaleReport(scale);
    }
}

问题2：

部分Android手机虚拟按键隐藏时，打开键盘会顺便带出虚拟按键。报表点击输入框时会出现情况是：每次点击输入框控件键盘刚弹出来就会隐藏。

点击输入框控件，键盘弹出带出虚拟按键
报表被虚拟按键挤压，需要调整大小进行刷新。
报表刷新导致输入框控件失去焦点，键盘隐藏。

解决方法：

对键盘的显示和隐藏进行监听：在键盘打开时，无论虚拟键是否变化，都不会调整报表大小。这样也就避免了因为报表的刷新导致的焦点失去、键盘隐藏的问题。只有键盘隐藏是，才会根据虚拟键的变化调整报表大小。

//SinglePageView
_onLayout(e) {
        const layout = e.nativeEvent.layout;
        const {width, height} = layout;
        //fixme MOBILE-8163 安卓虚拟按键会导致containerSize产生轻微变化，
        // 尤其是小米 OPPO部分全面屏机型在隐藏虚拟按键的情况下，填报时输入法会把虚拟按键带出来导致height变小，触发重新布局，重新发送options给原生，导致焦点立即失去，无法填报
        // 补充：如果键盘处于弹出状态，虚拟键变化时，不触发重新布局。这个不影响MOBILE-8463中键盘弹出带出虚拟键的情况，同时解决报表不能根据虚拟键的变化进行自适应的情况。
        if (Device.isAndroidPlatform() && this.orientation === orientation && this.keyboardDidShow) {
            this.causeByNavigationBarChanged = false;
            return;
        }
        this.setState({
            containerSize: {width, height}
        });
    }

问题2.1：

解决问题2的关键是监听键盘的变化。Android键盘是通过监听布局被挤压，然后通过计算来获得键盘弹出和键盘隐藏的事件的。
但在横屏的时候，键盘在全新的界面弹出，不会挤压主布局，暂时无法监听到键盘的弹出和隐藏事件。

解决方法：

暂时通过监听输入框焦点的变化来判断键盘状态。（此方法有bug的情况：横屏->点击输入框->点键盘的回收按钮隐藏键盘，输入框仍然有焦点->此时会被误认为键盘时弹出状态，报表不会根据虚拟键的变化伸缩）

 onReceiveMessage({row, column, data = {}}) {
    //Fixme 这里临时处理android横屏虚拟键问题，通过输入框的焦点来判断键盘是否打开，可以保证横屏填报可用。但还存在隐藏键盘后报表的放大系数不对的问题。
    if(Device.android() && Orientation.isLandscape()){
        this.resolveTextFocusEvent(data);
    }    
}

resolveTextFocusEvent (data){
    //输入框有焦点就认为键盘弹出了
    if(data.onTextFocus === true){
        this.keyboardDidShow = true;
    }else if(data.onTextFocus === false){
        this.keyboardDidShow = false;
    }
}

FR9.0 Android虚拟键的适配

1.虚拟键显示时，打开全屏界面（如扫码、批注等界面），隐藏虚拟键未填充界面，会留白。

2.先隐藏虚拟键再展开时，app底部或者右侧可能会被遮挡。

解决方法

特殊情况1：

特殊情况2：

关于报表页面的虚拟键适配：

问题1：

解决方法：

问题2：

解决方法：

问题2.1：

解决方法：

推荐阅读更多精彩内容