单词上的点击事件反应原生

Posted 2023-03-15

【中文标题】单词上的点击事件反应原生

【英文标题】：Click event on words react native

【发布时间】：2017-11-06 05:21:22

【问题描述】：

我想对不同的词设置不同的点击监听。目前我所拥有的是

<Text>android ios React Native<Text>

现在我想知道用户何时点击 Android、iOS 和 React Native，我必须对此执行一些分析，因此需要点击监听器来获取单独的单词。

有人知道吗？我检查了this 线程，但我发现它对我的要求没有用。

更新 我给出的字符串只是一个示例字符串，我将实时获取动态字符串。

这就是我将得到的动态字符串

    "str":"Hi i am using React-Native, Earlier i was using Android and so on"
    "tagWords":["React-Native","Android"]

在输出中我想要，“嗨，我正在使用 React-Native，之前我使用的是 Android 等等”

在“React-Native”和“Android”上有点击事件。有可能吗？

【问题讨论】：

这些方法也是动态的吗？你能提供一些你想要的背景吗

必须有一些 API 调用，你会在其中得到一些响应，然后你想相应地显示它

【参考方案1】：

您发送的帖子是实现所需行为的最简单方法。你需要有不同的监听器来实现不同的Text 组件。

示例

export default class App extends Component 
  onTextPress(event, text) 
    console.log(text);
  
  render() 
    return (
      <View style=styles.container>
        <Text>
          <Text onPress=(e) => this.onTextPress(e, 'Android') style=styles.red>'Android '</Text>
          <Text onPress=(e) => this.onTextPress(e, 'iOS') style=styles.purple>'iOS '</Text>
          <Text onPress=(e) => this.onTextPress(e, 'React Native') style=styles.green>'React Native'</Text>
        </Text>
      </View>
    );
  


const styles = StyleSheet.create(
  container: 
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  ,
  red: 
    fontSize: 20,
    color: 'red'
  ,
  purple: 
    fontSize: 20,
    color: 'purple'
  ,
  green: 
    fontSize: 20,
    color: 'green'
  
);

更新 1 （动态文本）

  render() 
    const fixedString = 'I\'m a fixed string that slipleted';
    const arrayOfStrings = ['These', 'are', 'strings', 'from', 'array'];
    return (
      <View style=styles.container>
        <Text style=styles.textContainer>
        
          fixedString.split(' ').map((str, index) => 
            return (
              <Text onPress=(e) => this.onTextPress(e, str)>
                `$str$index !== (fixedString.split(' ').lenght -1) && ' '`
              </Text>
            )
          )
        
        </Text>
        <Text style=styles.textContainer>
        
          arrayOfStrings.map((str, index) => 
            return (
              <Text onPress=(e) => this.onTextPress(e, str)>
                `$str$index !== (arrayOfStrings.lenght -1) && ' '`
              </Text>
            )
          )
        
        </Text>
      </View>
    );
  

更新 2（例如动态数据）

  removePunctuation = (text) => 
    // this is a hack to remove comma from the text
    // you may want to handle this different
    return text.replace(/[.,\/#!$%\^&\*;:=\_`~()]/g,"");
  
  render() 
    const arrayOfObjects = [
      str: 'Hi i am using React-Native, Earlier i was using Android and so on',
      tagWords: ['React-Native', 'Android']
    ];
    return (
      <View style=styles.container>
        <Text style=styles.textContainer>
          
            arrayOfObjects.map((obj) => 
              return obj.str.split(' ').map((s, index) => 
                if ( obj.tagWords.indexOf(this.removePunctuation(s)) > -1 ) 
                  return (
                    <Text onPress=(e) => this.onTextPress(e, s) style=styles.red>
                      `$s $index !== (obj.str.split(' ').lenght - 1) && ' '`
                    </Text>
                  )
                 else return `$s `;
              )
            )
          
        </Text>
      </View>
    );
  

【讨论】：

我给出的字符串只是一个例子，我有动态字符串，所以我该怎么做，我知道通过使用 3 <Text> 我们可以做到，但我们怎么能做到动态字符串？

@RaviRupareliya 用动态文本示例更新了问题，但我必须说，如果文本很长，或者如果你有很多这样的听众，你可能会遇到一些性能问题，因为每个单词都会创建一个新的听众和一个新的功能。

@bennygenel 你解释得很好，性能问题将会存在。一个确切的场景将帮助我们给出正确的答案。

@devanshsadhotra 确切的场景是我可能有类似“嗨，我正在使用 React-Native，之前我使用的是 Android 等等”这样的字符串，其中“React-Native”和“Android”我将是进入单独的数组，所以我必须基于此执行操作。

那么，是否有任何特定的单词集您想要对其执行某些操作？

【参考方案2】：

您只需要使用 TouchableOpacity（用于点击效果和点击），用于对齐文本的 View。和一定的造型。我正在为您提供适用于您的代码 sn-p，所有其他语法将保持不变

import Text, View, TouchableOpacity from 'react-native'
<View style=flexDirection:'row'>
  <TouchableOpacity onPress=()=>doSomethingAndroid()>
        <Text>Android</Text>
  </TouchableOpacity>
  <TouchableOpacity onPress=()=>doSomethingiOS()><Text> iOS</Text> 
  </TouchableOpacity>
  <TouchableOpacityonPress=()=>doSomethingReactNative()><Text> React Native</Text>
  </TouchableOpacity>
</View>

我希望这行得通，如果发生任何问题，请回复评论

【讨论】：

我给出的字符串只是一个例子，我有动态字符串，所以我该怎么做，我知道通过使用 3 <Text> 我们可以做到，但我们怎么能做到动态字符串？

如果该值来自后端，那么您必须这样做： operatingSystem 在操作系统键中您必须获取所需的值。

【参考方案3】：

您可以将每个可点击的单词包装到 'TouchableOpacity' 组件中，并按如下方式牵引 onPress 事件

<View style=flexDirection: 'row'>
   <TouchableOpacity onPress=() => 
        console.log('Android Clicked');
      >
      <Text>Android</Text>
   </TouchableOpacity>
   <TouchableOpacity onPress=() => 
       console.log('iOS Clicked');
     >
     <Text>Ios</Text>
   </TouchableOpacity>
</View>

请调整字间距。

编辑： 对于动态字符串，您可以按如下方式进行

...

handleWordClick(str, handler) 
 var words = str.split(' '), // word separator goes here,
     comp = [];
 words.forEach((s, ind) =>
     comp.push(
       <TouchableOpacity key=ind onPress=() => handler.call(this, s)>
          <Text>s</Text>
       </TouchableOpacity>
       );
 )
 return comp;


render() 
  var comp = this.handleWordClick('Android iOS React-Native', (word) => 
      //handle analytics here...
      console.log(word);
      );
  return (
    <View>
     ...
     <View style=flexDirection: 'row'>
       comp
     </View>
     ...
     </View>
    )

我不确定您的 单词分隔符 会是什么，因为您给出的示例将“React Native”作为单个单词。请注意这部分。

希望这会对你有所帮助。

【讨论】：

我给出的字符串只是一个例子，我有动态字符串，所以我该怎么做，我知道通过使用 3 <Text> 我们可以做到，但我们如何做到这一点动态字符串？

@RaviRupareliya 我已经编辑了动态字符串的答案，我不确定它是否符合您的目的，但希望这会对您有所帮助。