react-native onPress

onPress 的正确使用姿势

一般的 ListView 中每个 Row 的点击会对应一个 onPress 的事件，例如 push 到下一个 View，这种情况使用 onPress={this.handlePress} ，然后在 handlePress里进行响应的操作就 OK 了。

在显示 Github 时间线的时候，每个 Row 里会提到多个用户名和仓库名，点击用户名和仓库名时需要做不同的处理。最容易想到的方法就是给 handlePress 传递参数了，如果使用下面的代码：

 var action = <View style={styles.action}>
                <Text>{actionDescription}</Text>
                <TouchableOpacity onPress={this.goToUser(this.props.data.name)}><Text>data.payload.member.login</Text></TouchableOpacity>
              <Text> to </Text>

点击时同样会报

 Error: Invariant Violation: setState(...): Cannot update ...

因为上面的写法等于是在渲染的时候执行了 this.goToUser，会导致 state 改变。 onPress 应该传递进一个函数，这个函数会在点击的时候执行。一种可行的写法是使用匿名函数封装：

 <TouchableOpacity onPress={()=>{
   this.goToUser(this.props.data.name)
  }}>
 </TouchableOpacity>

这样就不会在渲染的时候跑里面的函数，也就避免了冲突。