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

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，检查传入的值并根据需要对其进行编辑？用户将可以删除百分号，但是它将立即重新出现。