前段时间学习了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底部而应运而生。