React Native Expo：实现输入框随内容扩展并推动货币符号保持整体居中

以下是两种可行的实现方式，直接满足你「输入金额推动货币符号右移、整体始终居中」的需求：

方法一：自适应宽度的Flex布局（最简单高效） #

核心思路是让输入框根据内容自动撑开宽度，和货币符号放在同一个行容器中，再让这个行容器在100%宽度的父容器里居中。输入内容变长时，输入框宽度自动扩展，自然推动货币符号右移，整个组合始终保持居中状态。

代码示例：

import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

export default function AmountInput() {
  const [amount, setAmount] = useState('0');

  return (
    <View style={styles.container}>
      {/* 这个行容器会被父容器居中，宽度随内容动态变化 */}
      <View style={styles.inputGroup}>
        <TextInput
          style={styles.amountInput}
          value={amount}
          onChangeText={setAmount}
          keyboardType="numeric"
        />
        <Text style={styles.currencySymbol}>€</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    justifyContent: 'center', // 让内部的输入组合居中
    paddingHorizontal: 16,
  },
  inputGroup: {
    flexDirection: 'row',
    alignItems: 'center', // 让输入框和货币符号垂直对齐
  },
  amountInput: {
    fontSize: 24,
    textAlign: 'right', // 金额右对齐，符合常规输入习惯
    // 不要设置固定width，让它自适应内容宽度
  },
  currencySymbol: {
    fontSize: 24,
    marginLeft: 4, // 和输入框保持合理间距
  },
});

方法二：动态计算宽度（适合需额外限制场景） #

如果需要对输入框宽度做额外约束（比如限制最大宽度），可以结合useState和onTextLayout获取文本实际宽度，动态调整输入框尺寸：

代码示例：

import React, { useState } from 'react';
import { View, TextInput, Text, StyleSheet } from 'react-native';

export default function AmountInput() {
  const [amount, setAmount] = useState('0');
  const [inputWidth, setInputWidth] = useState(0);

  const handleTextLayout = (e) => {
    // 获取文本的实际宽度，同步给输入框
    const { width } = e.nativeEvent.layout;
    setInputWidth(width);
  };

  return (
    <View style={styles.container}>
      <View style={styles.inputGroup}>
        <TextInput
          style={[styles.amountInput, { width: inputWidth }]}
          value={amount}
          onChangeText={setAmount}
          keyboardType="numeric"
          onTextLayout={handleTextLayout}
        />
        <Text style={styles.currencySymbol}>€</Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  inputGroup: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  amountInput: {
    fontSize: 24,
    textAlign: 'right',
    maxWidth: 150, // 可选：限制输入框最大宽度
  },
  currencySymbol: {
    fontSize: 24,
    marginLeft: 4,
  },
});

关于你之前用useRef失败的原因 #

大概率是因为你给输入框设置了固定宽度，或者修改宽度后没有触发组件重渲染。上面两种方法都是通过React状态驱动样式变化，确保宽度更新时组件能自动重新渲染。

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