TouchableHighlight 和 TouchableOpacity 在 render() 上突出显示答案

【问题标题】：TouchableHighlight and TouchableOpacity get highlighted on render()TouchableHighlight 和 TouchableOpacity 在 render() 上突出显示
【发布时间】：2017-02-17 14:44:28
【问题描述】：

我遇到了这样一种行为：TouchableHighlight 和 TouchableOpacity 在渲染时会产生视觉反应（未调用 onPress）。

有一件事是它看起来有点奇怪，当我进入页面时，我的按钮会稍微“闪烁”。这很奇怪，但可以容忍。更令人沮丧的是，如果我更改父组件的状态并因此调用 re-render()，按钮将再次“闪烁”，每当我更改状态时，所有按钮都会闪烁。

按下按钮会改变页面状态，因此按下按钮会使两个按钮都“闪烁”。

我使用 react-redux，但这不应该影响这种行为。

下面的代码只是为了说明。

render()
{
    return(
        <View>
            <ToucableHightlight> //Click here changes state
                <Content/>
            </ToucableHightlight>
            <ToucableHightlight>  //Click here changes state
                <Content/>
            </ToucableHightlight>
        <View>
    );
}

【问题讨论】：

只是在黑暗中拍摄，但您是否不小心调用onPress 而不是分配它？例如onPress = {this._onPressStart} vs onPress = {this._onPressStart()}
你不能使用第二种方法，因为 onPress 将在第一次渲染时被调用。你必须使用onPress = {() => this._onPressStart()}
不，也没有修复它。 @G0dsquad，如果你需要访问this，你怎么能做到这一点？ @WojtekSzafraniec 这也不能解决问题
@bloppit 简单的onPress={this._onPressStart.bind(this)}
对不起，你是对的。我试图立即通过评论编辑然后我忘记了。

标签： react-native touchableopacity touchablehighlight

【解决方案1】：

在TouchableOpacity中添加activeOpacity，它会强制不闪烁。

<TouchableOpacity style={styles.opecity} activeOpacity={1}>

【讨论】：

【解决方案2】：

我解决了这个问题。在我的渲染功能的早些时候，我定义了“内容”组件，导致在每次更新期间定义新的（但相似的）组件。将“内容”的定义放在渲染函数之外修复它，以便重新渲染页面时组件不再闪烁。

这解释了为什么我的组件在父组件中每次渲染时都被渲染为一个新组件，但它没有解释为什么 TouchableHighlight 在其初始渲染期间会闪烁。

在初始渲染期间闪烁的按钮对我来说是可以接受的 - 在任何状态更改时闪烁的按钮都是不可接受的。

所以我现在已经足够幸福了。

【讨论】：

【解决方案3】：

不确定是不是因为我正在运行更高版本，但我发现这种闪烁行为仅在第一次单击时发生。

我的解决方案是将触发重新渲染的代码放入 setTimeout

         <TouchableOpacity
            onPress={function() {
              setTimeout(function() {
                _this.setState({myState: 'someValue'})
              });
            }}
          >

【讨论】：