3

我遇到了一种行为，其中 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>
    );
}
4

3 回答 3

7

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

<TouchableOpacity style={styles.opecity} activeOpacity={1}>
于 2018-07-12T12:17:53.610 回答
0

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

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

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

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

于 2017-02-20T15:09:53.307 回答
0

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

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

         <TouchableOpacity
            onPress={function() {
              setTimeout(function() {
                _this.setState({myState: 'someValue'})
              });
            }}
          >
于 2017-05-01T07:34:07.910 回答