react-native的触摸事件应该如何动态生成？

首页 > 代码库 > react-native的触摸事件应该如何动态生成？

react-native的触摸事件应该如何动态生成？

2024-10-19 08:13:39 211人阅读

使用RN开发APP，按照一般的思路，比如我们在动态生成一个文章列表，然后当用户点击（TouchableHighlight）文章标题的时候，需要显示文章详情，此时需要在生成的每个列表上添加一个触摸事件，类似如下：

一行标题：
class Title extends Component{

  _onPress(){
    Alert.alert(‘test‘,‘test‘);
  }

  render(){
    return(
      <TouchableHighlight onPress={() => this.onPress() } >
          <Text>{this.props.name}</Text>
      </TouchableHighlight>
    )
  }

}

标题列表循环显示：
 {
     article_array.map( (name)=>( <Title name={name}  />  ) )
 }

当是当我们在模拟器上刷新的时候，此时并没有触发标题点击事件，但是却会弹出N个Alert对话框，那么我们就感到奇怪了，这个触摸事件为何为自动触发呢？

此时，不妨我们换一种写法，把要触发的方法，传递到要生成的组件中，作为组件的一个属性去调用，而不是把触发方法，写到子组件内部。

一个标题：
class Title extends Component{

  render(){
    return(
      <TouchableHighlight onPress={() => this.props.onPress() } >
          <Text>{this.props.name}</Text>
      </TouchableHighlight>
    )
  }

}

标题列表循环显示：

export default class NewTest extends Component {　

　　　_onPress(){
　　　　Alert.alert(‘test‘,‘test‘);
　　　　}

　　render(){