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

【问题标题】：Make React Native Text component take no space inside TextInput on Android使 React Native Text 组件在 Android 上的 TextInput 内不占用空间
【发布时间】：2023-03-29 20:28:01
【问题描述】：

我在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 元素仍然占据相当大的空间 (see Snack demo)。

See iOS screenshot

See Android screenshot

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

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

【问题讨论】：

标签： android ios react-native textinput

【解决方案1】：

我对你的css做了一些修改，请看下面的snack

https://snack.expo.io/KRMyR7wYq

【讨论】：

谢谢！不幸的是，它在 Android 上没有任何区别。检查 Snack 上的 Android 选项卡。
临时使用，你可以给你的 hiddenText 属性设置一个背景色'蓝色'，