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

Question

我想在 .目前我拥有的是

<Text>Android iOS React Native<Text>

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

有人对此有想法吗？我已经检查了这个线程，但我发现它对我的要求没有用。

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

这就是我将作为动态字符串获得的内容

{
    "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"上单击事件。可能吗？

Answer 1

您发送的帖子是实现所需行为的最简单方法。Sinse你需要有不同的侦听器来实现不同的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

您

只需要使用可触摸不透明度（用于点击效果和单击），查看用于文本对齐。 和某些样式。我为您提供适合您的代码片段，所有其他语法将保持不变

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

您可以将每个可点击的单词包装到"可触摸不透明度"组件中，并按如下方式跟踪 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"作为单个单词。请注意这部分。

希望这对您有所帮助。