单词上的单击事件对本机做出反

Question

我想在不同的单词上设置不同的点击监听器。目前我所拥有的是

<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"]
}

在我想要的输出中，＆＃34;您好我正在使用 React-Native ，之前我使用 Android 等等＃34;

点击事件＆＃34; React-Native＆＃34;和＆＃34; Android＆＃34;。有可能吗？

Answer 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>
    );
  }

Answer 2

您需要使用的是TouchableOpacity（用于点按效果和点击），查看文本的对齐方式。和某些造型。我正在为您提供适合您的代码段，所有其他语法将保持不变

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>

我希望这有效，如果发生任何问题，请回复

Answer 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”作为单个单词。请注意这一部分。

希望这会对你有所帮助。