搜索选项功能-本机反应

Question

我在将React Native应用程序中的功能合并时有些困惑。用于搜索的TextInput和包含数据的平面列表。当我在TextInput中键入内容时，Flatlist会过滤并显示/突出显示搜索文本。我输入了“公告”，如下所示。我的文字限制为3行。单击箭头，我们可以阅读完整的消息。

现在的要求是，当我键入“公告”或任何搜索字符串时，应显示整个文本（而不仅仅是3行）。

代码：此处，当“ arrowClicked”状态为true时，消息将展开并且可以看到所有行。当再次单击它时，消息折叠。 “值”状态具有搜索字符串。现在，当“值”不为空时，必须扩展消息。

              { arrowClicked === true ? 
              <Text>{value !== "" ? getHighlightedText(alert) : alert}</Text>
              :
              <Text numberOfLines={3}>{value !== "" ? getHighlightedText(alert) : alert}</Text>
              }
              .
              .
              .
              {
                arrowClicked === true ? 
                <Icon type='materialicons' name='arrow-drop-up' size={33} onPress={()=>{this.setFullLength()}}  />
                : 
                <Icon type='materialicons' name='arrow-drop-down' size={33} onPress={()=>{this.setFullLength()}}  />

               } 

我如何整合这种逻辑？？？请帮忙!!!

Answer 1

如果value是搜索字符串，那么在执行搜索或设置initSearch: true的值时，您需要设置另一个属性，例如value，然后将新属性添加到if语句中，例如：

{ arrowClicked === true || initSearch ? 
    <Text>{value !== "" ? getHighlightedText(alert) : alert}</Text>
    :
    <Text numberOfLines={3}>{value !== "" ? getHighlightedText(alert) : alert}</Text>
 }
              .
              .
              .
 { arrowClicked === true || initSearch ? 
      <Icon type='materialicons' name='arrow-drop-up' size={33} onPress={()=>{this.setFullLength()}}  />
      : 
      <Icon type='materialicons' name='arrow-drop-down' size={33} onPress={()=>{this.setFullLength()}}  />

  } 

当调用折叠时，将initSearch设置为false。