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
});
}
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;
}
}