React Native实现指定UI：指纹图标嵌入TextInput边框内

你需要调整布局结构和样式，让图标处于带边框的容器内部，同时修正原代码里的函数组件状态错误，具体方案如下：

问题根源 #

当前TextInput的底部边框仅属于输入框自身，图标和输入框是同级元素，所以图标自然在边框外部。要实现目标效果，需要把边框加到外层容器，让输入框和图标都处于边框范围内。

修正方案（推荐flex布局版） #

import { View, TextInput, StyleSheet } from 'react-native'
import React, { useState } from 'react'
import Icon from 'react-native-vector-icons/MaterialCommunityIcons'

const TestAtom = () => {
  // 函数组件使用useState管理状态，替代原代码的this.setState
  const [searchString, setSearchString] = useState('')
  
  return (
    <View style={styles.searchSection}>
      <TextInput 
        style={styles.input} 
        placeholder='User' 
        onChangeText={setSearchString}
        value={searchString}
        underlineColorAndroid="transparent"
      /> 
      <Icon style={styles.searchIcon} name='fingerprint' size={20} color='#000' />
    </View>
  )
}

const styles = StyleSheet.create({
  searchSection: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    // 把底部边框移到外层容器，覆盖输入框和图标
    borderBottomColor: '#000',
    borderBottomWidth: 1,
    paddingHorizontal: 10
  },
  searchIcon: {
    // 给图标加左侧内边距，和输入框拉开距离
    paddingLeft: 10
  },
  input: {
    flex: 1,
    paddingVertical: 10,
    backgroundColor: '#fff',
    color: '#424242',
    // 移除输入框自身的底部边框
  }
});

export default TestAtom

关键调整点 #

1. 边框迁移：将底部边框从TextInput移到外层的searchSection容器，让输入框和图标都处于边框包裹范围内。
2. 状态修正：函数组件不能使用this.setState，改用useState钩子管理输入状态，避免运行报错。
3. 布局优化：通过flex布局让输入框占满容器剩余空间，图标固定在右侧，同时用内边距调整元素间距。

备选方案（绝对定位版） #

如果需要更精确控制图标位置，可使用绝对定位：

// 仅修改样式部分
const styles = StyleSheet.create({
  searchSection: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    backgroundColor: '#fff',
    borderBottomColor: '#000',
    borderBottomWidth: 1,
    paddingHorizontal: 10,
    // 开启相对定位，让子元素的绝对定位基于此容器
    position: 'relative'
  },
  searchIcon: {
    position: 'absolute',
    right: 15
  },
  input: {
    flex: 1,
    paddingVertical: 10,
    paddingRight: 40, // 给图标留出空间，避免文本被遮挡
    backgroundColor: '#fff',
    color: '#424242',
  }
});

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