Question

我遇到一种行为，其中TouchableHighlight和TouchableOpacity在渲染时可视化反应（onPress未被调用）。

有一点是它看起来有点奇怪，当我进入页面并且我的按钮发出一声小的眨眼＆＃34;。这很奇怪但是可以忍受。更令人沮丧的是，如果我改变父组件的状态并因此调用重新渲染（），那么按钮将＃34;闪烁＆＃34;再次，每当我改变状态时，所有按钮都会闪烁。

按下按钮会改变页面状态，因此按下按钮会使两个按钮＆＃34;闪烁＆＃34;。

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

以下代码仅供参考。

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

Answer 1

我解决了这个问题。在我的渲染功能中，我定义了＆＃34; Content＆＃34; -components，导致在每次更新期间定义了新的（但相似的）组件。放置＆＃34;内容＆＃34;的定义在渲染函数之外修复它，以便在重新渲染页面时组件不再闪烁。

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

在初始渲染过程中闪烁的按钮对我来说是可以接受的 - 在任何状态改变时闪烁的按钮都没有。

所以我现在很开心。

Answer 2

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

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

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

Answer 3

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

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

TouchableHighlight和TouchableOpacity在render（）

3 个答案: