React Native：可点击的项目列表答案

【问题标题】：React Native: clickable list of itemsReact Native：可点击的项目列表
【发布时间】：2019-02-01 09:02:46
【问题描述】：

我正在做一个字典应用程序，其中包含这样的项目列表：

可接受的、仁慈的、大的、慈善的、体贴的
公平、善良、乐于助人、诚实、好客
奢华、理性、体贴、宽容、无私

列表中的每个项目都是一个链接，该链接指向与单击的单词相关的类似列表。

我有两个问题：

如何在 React Native 中做到这一点，而不会落入 React Native WebView 的关怀之手？它需要支持样式（如图所示）和以某种方式处理目标点击。
欢迎使用替代解决方案，包括基于 WebView 组件构建的解决方案。在这里只考虑性能方面。

附：我在 M.-W 中发现了类似的功能。词典应用：

【问题讨论】：

将每个单词包装在TouchableOpacity 组件中，并使用onPress 属性相应地处理触摸。

标签： android ios reactjs react-native mobile-application

【解决方案1】：

根据文档：

Text 支持嵌套、样式和触摸处理。

所以我认为最好的解决方案是正确嵌套你的文本并传递一个函数来处理onPress 动作。

我将给出一个示例代码，完全没有样式但完全可以样式化：

  onPress = (text) => {
    // do stuff
    return
  }

  render() {
    return (
      <View style={styles.container}>
        <Card>
          <Text>
          Synonyms: 
            {this.state.synonyms.map(synonym => {
              return <Text onPress={() => this.onPress(synonym)}> {synonym} </Text>
            })}
          </Text>
        </Card>
      </View>
    );
  }

如果你想看一看，here 是一种小吃

【讨论】：

效果很好。谢谢！