使React Native Text组件在Android上的TextInput中不占用空间

Question

我在TextInput中有一个Text元素，我想让它不占用空间。以下是组件的预览：

export function Component() {
function renderText() {
return (
<Text>
This is normal text
<Text style={styles.hiddenText}>This very long text should be hidden because it is metadata.</Text>
</Text>
);
}
return (
<View style={styles.container}>
<TextInput
style={styles.input}
multiline={true}
>
{renderText()}
</TextInput>
</View>
);
}

以下是我应用于要隐藏的Text元素的样式：

hiddenText: {
fontSize: 0.000001,
backgroundColor: 'red' // just to show that it actually appears on Android
}

这些样式在iOS上可以正常工作，但在Android上，所谓的隐藏Text元素仍然占据了相当大的空间(请参阅Snack演示(。

参见iOS屏幕截图

查看Android屏幕截图

如果你想知道我为什么要这么做，上面是我的真实应用程序的简化版本。事实上，我有一个文本输入，可以添加评论，用户也可以互相标记。我目前的实现将标记用户保持在以下格式@user's full name|userId;的文本中，因为我发现这种方法在操作文本输入的实际内容方面是最简单的。我必须保留用户的id和全名，因为id是实际发送到API的内容。

如何在Android上隐藏红色背景文本，并使其看起来与iOS上相同？

Answer 1

我在你的css中做了一些修改，请查看下面的小吃

https://snack.expo.io/KRMyR7wYq