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

Posted 2023-04-18

【中文标题】使 React Native Text 组件在 Android 上的 TextInput 内不占用空间

【英文标题】：Make React Native Text component take no space inside TextInput on Android

【发布时间】：2021-07-23 15:15:24

【问题描述】：

我在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 上相同？

【参考方案1】：

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

https://snack.expo.io/KRMyR7wYq

【讨论】：

谢谢！不幸的是，它在 Android 上没有任何区别。检查 Snack 上的 Android 选项卡。

临时使用，你可以给你的 hiddenText 属性设置一个背景色'蓝色'，