react-native - 如何在 TextInput 中包含不可编辑的文本？

Question

概括

TextInput我想在's 值旁边有文本。此文本不应该是可编辑的，但也需要响应，即，它随着 TextInput 的内容长度的变化而移动，因此在TextInput' 的值之后始终是 X 个字符。

当前代码

1. 拥有相邻的TextInput和Text组件不会导致响应行为。

<View style={{flexDirection:"row"}}>
    <TextInput
        defaultValue={stringValue}
        {...props}
    />
    <Text>%</Text>
</View>

2. 修改stringValue以添加额外的文本意味着它可以由用户编辑。

newStringValue = stringValue + "%";

return (
    <View style={{flexDirection:"row"}}>
        <TextInput
            defaultValue={newStringValue}
            {...props}
        />
        <Text>%</Text>
    </View>
);

期望的行为

1. 文本应该随着TextInput' 值的长度变化而移动。
2. 文本不可编辑，并且光标TextInput无法在相邻文本中移动。

如何做到这一点？

Answer 1

也许像利用onChangeText，检查传入的值并根据您的需要编辑它？用户将能够删除百分号，但它会立即重新出现。