React Native 查找文本是否溢出容器答案

【问题标题】：React Native find if text overflows containerReact Native 查找文本是否溢出容器
【发布时间】：2020-04-03 17:32:56
【问题描述】：

我有一个问题，在react-native中，我想知道是否有可能知道文本是否溢出容器，想象下面的代码（容器可以是任何东西，View，ScrollView等都无所谓）

<Container>
 <Text> Long text...</Text>
</Container>
{textOverflows && <GradientComponent/>}

基本上，如果文本溢出，我会尝试使用布尔值，并在需要时有条件地在容器底部添加渐变。

【问题讨论】：

你可以创建一个内存元素并检查它的宽度。如果这个元素的宽度大于容器的宽度，它就会溢出。有用reference
该注释链接用于在浏览器中创建 HTML DOM 元素，不适用于 React Native。

标签： javascript reactjs react-native

【解决方案1】：

您可以做的是检查该文本的长度，如果文本的长度大于该容器的宽度，则为其添加样式。它看起来像这样：

text.legth >container.width ?风格= {styles.gradientCompoennt} : 风格={styles.whatever}

【讨论】：

似乎是唯一的方法。谢谢。
text.length 将是文本字符串的字符数，并不代表文本的宽度

【解决方案2】：

使用评论中@Rajesh 的建议，我们可以使用一个虚拟的Text 组件来测量文本长度。这是一个简单的示例 (link to Expo Snack)，其中输入 TextInput 会导致显示当前布局中文本的宽度（而不是字符数）。文本容器的宽度可以类似地通过onLayout 获得或基于 flex 计算。那么我们只需要比较文本宽度和容器宽度就可以判断是否溢出了。

import * as React from 'react';
import {View, Text, TextInput} from 'react-native';

const MyComponent = props => {
  const [text, setText] = React.useState('');
  const [textWidth, setTextWidth] = React.useState(0);

  return (
    <View style={{top: 200}}>
      <TextInput
        style={{borderWidth: 1, borderColor: 'black', height: 30}}
        onChangeText={text => setText(text)}
        placeholder="Type something"
      />
      {/* dummy text to acquire text width. Hide it according to the current layout*/}
      <View
        style={{height: 0, alignSelf: 'flex-start'}}
        onLayout={e => {
          setTextWidth(e.nativeEvent.layout.width);
        }}>
        <Text style={{color: 'white'}}>{text}</Text>
      </View>
      <View>
        <Text>{`Text width: ${textWidth}`}</Text>
      </View>
    </View>
  );
};

export default MyComponent

注意：设置虚拟文本容器样式alignSelf 是一个关键步骤，因为它强制虚拟文本容器紧紧地包裹文本。否则，虚拟文本容器宽度将始终是屏幕的最大宽度。详情请见this answer。

【讨论】：