如何用CSS/Styled Components在React Native中实现类Google Tasks导航

核心难点：容器截断区域实现 #

React Native 没有原生 CSS clip-path 支持，推荐两种可行方案：

方案1：圆角+遮罩层模拟 #

用顶部圆角的容器，再在中间加一个白色圆形遮罩，盖住圆角衔接处，模拟中间截断效果：

import styled from 'styled-components/native';

const TaskContainer = styled.View`
  flex: 1;
  background-color: #fff;
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  margin-top: -20px;
  padding-top: 40px;
  position: relative;
`;

// 中间遮罩层，精准盖住圆角衔接处
const CutoutMask = styled.View`
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 24px;
  background-color: #fff;
  border-radius: 12px;
`;

使用时将CutoutMask放在TaskContainer内部最上方即可。

方案2：SVG 自定义容器形状 #

用react-native-svg绘制带中间缺口的容器背景，效果更精准：
先安装依赖：npm install react-native-svg

import styled from 'styled-components/native';
import Svg, { Path } from 'react-native-svg';

const SVGContainer = styled.View`
  flex: 1;
  margin-top: -20px;
`;

const CutoutBackground = () => (
  <Svg width="100%" height="100%" viewBox="0 0 375 812" fill="white">
    <Path d="M0 40 C0 17.9 17.9 0 40 0 L335 0 C357.1 0 375 17.9 375 40 L375 812 L0 812 L0 40 Z M187.5 20 C198.3 20 207.5 29.2 207.5 40 C207.5 50.8 198.3 60 187.5 60 C176.7 60 167.5 50.8 167.5 40 C167.5 29.2 176.7 20 187.5 20 Z" />
  </Svg>
);

将CutoutBackground作为容器背景，内部嵌套业务内容即可。

悬浮"+"按钮实现 #

绝对定位在导航栏与下方容器的中间，提升层级并添加阴影：

const AddButton = styled.TouchableOpacity`
  position: absolute;
  bottom: -28px;
  left: 50%;
  transform: translateX(-50%);
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background-color: #ea4335;
  justify-content: center;
  align-items: center;
  /* iOS 阴影 */
  shadow-color: #000;
  shadow-offset: 0px 2px;
  shadow-opacity: 0.3;
  shadow-radius: 4px;
  /* 安卓 elevation */
  elevation: 6;
`;

const AddButtonText = styled.Text`
  color: #fff;
  font-size: 32px;
  font-weight: bold;
`;

整体阴影效果优化 #

导航栏与下方容器的阴影要区分开：

• 导航栏底部轻微阴影：

const NavBar = styled.View`
  height: 60px;
  background-color: #fff;
  justify-content: center;
  align-items: center;
  shadow-color: #000;
  shadow-offset: 0px 1px;
  shadow-opacity: 0.1;
  shadow-radius: 2px;
  elevation: 2;
`;

• 下方容器顶部阴影（配合截断效果）：

const TaskContainer = styled.View`
  /* ... 其他样式 */
  shadow-color: #000;
  shadow-offset: 0px -2px;
  shadow-opacity: 0.15;
  shadow-radius: 8px;
  elevation: 4;
`;

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