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

Question

总结

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

当前代码

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

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

1. 修改stringValue添加额外的文字意味着它可以被用户编辑。

newStringValue = stringValue + "%";

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

期望的行为

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

如何做到这一点？

Answer 1

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