React Native 如何实现label标签悬浮在输入框边框上的效果

实现方案 #

你需要通过绝对定位+背景色遮挡的方式实现label悬浮在边框上的效果，具体修改如下：

第一步：调整组件样式 #

修改你StyleSheet里的对应样式，核心是给label加绝对定位，调整容器的上内边距预留位置，给label设置和页面背景一致的背景色挡住边框段：

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 20,
    // 调大上内边距，给悬浮label预留显示空间
    paddingTop: 15,
    paddingHorizontal: 12.5,
    paddingBottom: 2.5,
    borderRadius: 5,
    borderWidth: 0.75,
    borderColor: COLORS.WHITE,
    // 开启相对定位，作为label绝对定位的参照父容器
    position: 'relative'
  },
  input: {
    fontFamily: FONT_FAMILY.primaryMedium,
    fontSize: 14,
    height: 37,
    color: COLORS.WHITE,
  },
  label: {
    fontFamily: FONT_FAMILY.primary,
    color: COLORS.WHITE,
    fontSize: 12,
    // 核心悬浮样式
    position: 'absolute',
    // 向上偏移到边框位置，数值可根据你的设计尺寸微调
    top: -7,
    left: 10,
    // 背景色和你的页面背景色保持一致，用来挡住label下方的边框线
    backgroundColor: COLORS.PAGE_BACKGROUND, // 替换为你项目里定义的页面背景色变量
    // 左右加少量内边距，让边框遮挡效果更自然
    paddingHorizontal: 4
  },
});

第二步：组件逻辑调整（可选） #

现有组件结构不需要修改即可生效，如果你需要实现聚焦时label上浮的交互动画，可以额外加useState监听输入框的onFocus、onBlur事件，动态修改label的位置和字号即可。

react-native-paper适配方案 #

你之前设置透明背景失效是因为组件默认带底层背景色，修改后即可正常显示：

import { TextInput } from 'react-native-paper';

<TextInput
  mode="outlined"
  label="Email"
  value={emailId}
  onChangeText={text => setEmailId(text)}
  theme={{
    colors: {
      background: 'transparent',
      primary: COLORS.WHITE,
      text: COLORS.WHITE,
      placeholder: '#9F9F9F'
    }
  }}
  style={{backgroundColor: 'transparent'}}
  underlineColor="transparent"
  activeOutlineColor={COLORS.WHITE}
  outlineColor={COLORS.WHITE}
/>

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