iPhone X下Native Base主题适配问题解决方法咨询

我之前维护旧React Native项目时碰到过完全一样的情况——Native Base 2.3.10发布时iPhone X刚推出，官方还没针对新设备的刘海、底部安全区做适配，所以会出现布局溢出、内容被刘海遮挡或者底部被Home Indicator覆盖的异常。这里有几个亲测有效的解决思路：

• 升级Native Base到适配iPhone X的版本
  这是最彻底的解决方案。Native Base从2.8.0左右开始逐步加入iPhone X适配，建议升级到2.x系列的后期稳定版本（比如2.15.2），这个版本既兼容你当前的React 16.2.0和React Native 0.52.0，又修复了iPhone X的适配问题。执行命令升级：

  npm install native-base@2.15.2 --save
  

  升级后记得清除项目缓存，避免依赖冲突：

  npm start -- --reset-cache
  

• 手动添加安全区适配（不升级依赖的方案）
  如果不想升级依赖，可以通过React Native自带的SafeAreaView（0.50+版本支持）或者手动设置padding来适配：

  1. 用SafeAreaView包裹整个页面容器，自动处理上下安全区：

     import { SafeAreaView, Platform } from 'react-native';
     
     <SafeAreaView style={{ flex: 1, backgroundColor: '#fff' }}>
       <Container>
         <Content>
           {/* 你的页面内容 */}
         </Content>
       </Container>
     </SafeAreaView>
     

  2. 针对特定组件做适配，比如给Content添加底部padding避开Home Indicator：

     import { Dimensions, Platform } from 'react-native';
     const { height } = Dimensions.get('window');
     const isIPhoneX = Platform.OS === 'ios' && (height === 812 || height === 896); // 适配竖屏和横屏
     
     <Content contentContainerStyle={{ paddingBottom: isIPhoneX ? 34 : 0 }}>
       {/* 内容 */}
     </Content>
     

     对于顶部Header，也可以添加padding避开刘海：

     <Header style={{ paddingTop: isIPhoneX ? 44 : 0 }}>
       {/* Header内容 */}
     </Header>
     

• 修复Native Base组件的默认样式
  有些Native Base内置组件（比如Footer）的默认高度没有考虑iPhone X的底部安全区，可以通过自定义样式覆盖：

  import { Dimensions, Platform } from 'react-native';
  const { height } = Dimensions.get('window');
  const isIPhoneX = Platform.OS === 'ios' && (height === 812 || height === 896);
  
  <Footer style={{ height: isIPhoneX ? 83 : 49 }}>
    {/* Footer内容 */}
  </Footer>
  

• 升级React Native版本（可选）
  你的React Native 0.52.0本身对iPhone X的支持也比较有限，若项目允许，可以考虑升级到0.55+版本，这个版本开始官方完善了iPhone X的适配，配合升级后的Native Base，能彻底解决这类问题。不过升级前要检查其他依赖（比如firebase@4.11.0）是否兼容更高版本的React Native。

内容的提问来源于stack exchange，提问作者Jeff Bootsholz