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

Posted 2020-09-27 飞哥100

使用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(){

　　 {
     article_array.map( (name)=>( <Title name={name} onPress={this._onPress}  />  ) )
 　　}
}

｝

这回，我们在刷新的时候，发现正常了。

假如要动态生成的组件列表中包含事件，那么要把事件处理方法，当成组件属性，传递过来。