React Native如何实现适配多端的响应式自定义异形底部View？

现有问题分析 #

你当前的实现通过多View拼接、硬编码比例偏移实现，不同屏幕尺寸下固定比例的偏移值会出现错位，适配性差，多View拼接也容易出现边界缝隙。

适配方案 #

方案1：纯原生样式实现（无额外依赖）

核心思路是不用拆分多个底部块，用单个底部栏容器配合居中的圆形遮罩实现，完全不用硬写水平偏移值，自动适配所有屏幕宽度：

import React from "react"
import { StyleSheet, View, Dimensions } from "react-native"

// 底部栏固定高度可自行调整
const TAB_BAR_HEIGHT = 50
// 中间缺口的半圆直径，可自行调整
const GAP_DIAMETER = Dimensions.get('window').width * 0.3

export default function Main() {
  return (
    <View style={styles.root}>
      {/* 底部栏容器 */}
      <View style={styles.tabBar}>
        {/* 中间缺口遮罩 */}
        <View style={styles.gapMask} />
        {/* 底部导航按钮可在此处添加，左右各放对应按钮，中间位置留空即可 */}
      </View>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    flex: 1,
    position: 'relative',
  },
  tabBar: {
    position: 'absolute',
    bottom: 0,
    width: '100%',
    height: TAB_BAR_HEIGHT,
    backgroundColor: 'black',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-around',
    // 核心属性：隐藏容器外的内容，将圆形遮罩上半部分截取后即可得到缺口效果
    overflow: 'hidden',
  },
  gapMask: {
    position: 'absolute',
    alignSelf: 'center',
    top: -GAP_DIAMETER / 2,
    width: GAP_DIAMETER,
    height: GAP_DIAMETER,
    borderRadius: GAP_DIAMETER / 2,
    // 遮罩颜色需和页面背景色保持一致
    backgroundColor: 'white',
  }
})

方案2：SVG实现（适合复杂异形场景）

如果后续需要调整更复杂的异形效果（比如缺口带弧度、阴影等），推荐用react-native-svg绘制自定义路径，仅需要设置SVG宽度为100%即可自动适配所有屏幕，不会出现错位问题。

1. 先安装依赖：
   npm install react-native-svg
2. 示例代码：

import React from 'react';
import { View, StyleSheet } from 'react-native';
import Svg, { Path } from 'react-native-svg';

export default function Main() {
  return (
    <View style={styles.root}>
      <Svg width="100%" height={50} style={styles.tabBarSvg}>
        {/* Path路径可直接从Figma等设计工具导出，自动适配不同屏幕宽度 */}
        <Path
          d="M0,0 L30%,0 C35%,0 37%,10 50%,10 C63%,10 65%,0 70%,0 L100%,0 L100,50 L0,50 Z"
          fill="black"
        />
      </Svg>
    </View>
  )
}

const styles = StyleSheet.create({
  root: {
    flex:1,
    position: 'relative'
  },
  tabBarSvg: {
    position: 'absolute',
    bottom: 0,
  }
})

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