Question

我使用redux调度一个触发“真/假”的动作，

因此，当我打开其底部高度模态以包含播放器控制器时，我将其底部模式包含“迷你玩家”。

在播放器控制器中，当我按“播放/暂停图标”时，我会调度一个动作，将暂停设置从false设为true或相反

但是问题是当动作派发时，它的模式又回到了低音高大的“迷你玩家”

Gif gif here

那我该如何解决呢？

换句话说，可以防止重新渲染模式吗？

代码

播放器控制器

<View>

 <View style={{paddingHorizontal: 10}}>
   <Video
     ....
       paused={this.props.isPause} // redux store
      ....
   />

 </View>

  {!this.props.isPause ? (
      <Button
        onPress={() => this.props.isPauseTrigger(true)}> // redux action
          <Icon name="md-pause" style={styles.iconColor} />
      </Button>
       ) : (
          <Button
             onPress={() => this.props.isPauseTrigger(false)}> // redux action
               <Icon name="md-play" style={styles.iconColor} />
          </Button>
  )}
 </View>

迷你玩家组件我使用了“反应本机复活的底页”

const renderHeader = () => {
    const animatedBackgroundOpacity = Animated.sub(
      1,
      animatedHeaderContentOpacity,
    );
    return (
      <View onPress={onHeaderPress} key={'header-container'}>

          <Animated.View
            intensity={100}
            tint={'default'}
            style={[
              styles.headerContentContainer,
              {
                opacity: animatedHeaderContentOpacity,
              },
            ]}>               

            <View>
             ....
              {props.isPause ? ( // Redux State
                <TouchableOpacity
                  onPress={() => {
                    props.isPauseTrigger(false); // Redux action
                    console.log('should play?', props.isPause);
                  }}
                  style={styles.headerActionButton}>
                  <Ionicons color="#282A36" name="ios-play" size={30} />
                </TouchableOpacity>
              ) : (
                <TouchableOpacity
                  onPress={() => {
                    props.isPauseTrigger(true); // Redux action
                    console.log('should pause?', props.isPause);
                  }}
                  style={styles.headerActionButton}>
                  <Ionicons color="#282A36" name="ios-pause" size={30} />
                </TouchableOpacity>
              )}
            </View>

          </Animated.View>
      </View>
    );
  };




 const renderContent = () => {
       return (
        <Player />
    );
  };

我尝试过的事情

当我将<Video />中的暂停属性更改为使用本地状态“内部控制器播放器组件”时，它可以很好地工作，而不会出现GIF中的任何问题。但是，我想在我更改图标时最小化底层玩家。

因为我使用本地状态，所以它没有监听redux状态

Answer 1

React根据道具或状态的变化重新渲染组件。您可以使用 componentShouldUpdate 生命周期方法来防止默认行为。根据您处理迷你播放器打开/关闭状态的方式，可能还会有其他解决方案。

Answer 2

您的父组件是什么？您如何控制模式的打开/关闭，以及它如何与状态配合使用，并且您只需要按钮图标的播放/暂停即可解除状态，即您无需存储在redux中。

所以在父级上：状态：玩家：“正在玩”

Func updatePlayer（mode）this.setState（player：mode）

在模态组合中，无论您在何处完成它并具有对closeModal（）的功能，只需具有this.props.updatePlayer（this.state.playerState）它将更新父级上的状态。

如何防止调度动作重新渲染屏幕-Redux？

2 个答案: