React Native实现TextInput与图标按钮动态适配并水平居中

核心思路 #

借助React Native的Flexbox布局实现横向排列，同时通过监听输入内容动态计算TextInput的宽度，让输入框随内容自适应宽度，按钮会自然跟随右移，最后通过外层容器实现整体水平居中。

具体实现代码 #

1. 引入依赖组件

import React, { useState, useRef } from 'react';
import { View, TextInput, StyleSheet } from 'react-native';
import MaterialIcons from '@expo/vector-icons/MaterialIcons';

2. 编写组件逻辑

export default function App() {
  const [inputText, setInputText] = useState('');
  const inputRef = useRef(null);
  const [inputWidth, setInputWidth] = useState(100); // 设置输入框初始宽度

  const handleTextChange = (text) => {
    setInputText(text);
    // 实时测量输入框宽度并更新
    inputRef.current?.measure((x, y, width) => {
      setInputWidth(width);
    });
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputRow}>
        <TextInput
          ref={inputRef}
          style={[styles.input, { width: inputWidth }]}
          value={inputText}
          onChangeText={handleTextChange}
          placeholder="输入内容..."
        />
        <MaterialIcons.Button
          name="send"
          size={24}
          color="white"
          backgroundColor="#2196F3"
          onPress={() => {}}
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    paddingHorizontal: 20,
  },
  inputRow: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8, // 控制输入框与按钮的间距
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 4,
    paddingVertical: 8,
    paddingHorizontal: 12,
    minWidth: 100, // 保证输入为空时输入框有合理宽度
  },
});

关键说明 #

• 外层container通过alignItems: 'center'实现整体水平居中，若需要垂直居中可保留justifyContent: 'center'。
• inputRow设置flexDirection: 'row'让输入框和按钮横向排列，gap属性控制两者间的间距。
• 通过useRef获取TextInput实例，在输入内容变化时调用measure方法实时获取输入框宽度，动态更新样式中的宽度值，按钮会自动随输入框宽度变化右移。
• 设置minWidth避免输入框在内容为空时过于狭窄。

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