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

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

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

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

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（用于点击效果和点击），用于对齐文本的 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>

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

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

希望这会对你有所帮助。