React-Navigation控件BottomTabBar高度问题

前段时间学习了React-Native，经过几本书的洗礼后正式开启运行模式，进入实战中。

项目中有一个项目需求就是，虚拟键盘固定在BottomTabBar上方。

这个需求第一感觉就是简单呀，思路瞬间就出来了：先来个绝对定位，然后再做个偏移就OK了，于是就....

1：position:'absolute',

2：Top:height-XX,

然后问题就来了，这个XX的值应该是多少呢，各种百度，各种Google，依然没有找到相关文章。最后只能寄托于各种群，然后每次提问都是石沉大海.....

没办法只能自己看源代码，经过一翻奋斗后终于找到了源代码设置BottomTabBar高度的位置。

代码路径：node_modules/react-navigation-tabs/views/BottomTabBar.js.

很好终于大功告成找到了的XX的值为49，很棒效果也出来了。但是开心的时刻在下一瞬间就结束了，尝试在IphoneX带刘海的机型上运行，发现BottomBar高度曾大了一截把VirtualKeyBoard挡住了。没办法只能继续研究源代码。

代码路径：node_modules/react-navigation-tabs/node_modules/react-native-safe-area-view/index.js

从代码中我们又可以得到IphoneX的高度增加：34，当然横屏是：24

公布答案：

非IphoneX(Iphone&Android)

Top:height-48

IphoneX

Top:height-48-34

提取IphoneX判断方法：

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

const X_WIDTH = 375;
const X_HEIGHT = 812;

const { height: D_HEIGHT, width: D_WIDTH } = Dimensions.get('window');

const { PlatformConstants = {} } = NativeModules;
const { minor = 0 } = PlatformConstants.reactNativeVersion || {};

module.exports = {
    isIphoneX: function(){
        if (Platform.OS === 'web') return false;
        if (minor >= 50) {
            return DeviceInfo.isIPhoneX_deprecated;
        }
        return (
            Platform.OS === 'ios' &&
            ((D_HEIGHT === X_HEIGHT && D_WIDTH === X_WIDTH) ||
                (D_HEIGHT === X_WIDTH && D_WIDTH === X_HEIGHT))
        );
    }
};

 

解决方法二：

使用：SafeAreaView组件：style中的height参数个人理解为底部向上开始显示内容的位置。

import {SafeAreaView} from 'react-navigation';

<SafeAreaView style={styles.key_container}>
    <VirtualKeyBord_Float/>
</SafeAreaView>

key_container:{
    height:50,
}

SafeAreaView 组件，官方的解释是防止IphoneX在隐藏BottomTabBar时内容显示在IphoneX底部而应运而生。