Question

在我的 React Native 项目中，我有一个屏幕显示一副纸牌，另一个屏幕包含游戏说明并允许您洗牌，我使用标签导航器在卡片和说明之间切换，并使用堆栈导航器打开说明屏幕.

当我在一张特定的卡片上，我切换到说明并切回我离开的卡片时，当我返回卡片屏幕时仍然可见，这很好。但是当我切换到指令并点击 shuffle 时，当我返回卡片屏幕时，我留下的卡片仍然可见，这很糟糕，因为我的新洗牌的第一张卡片应该替换它。

为了解决这个问题，当我在调用 render() 后切换回卡片视图时，我试图强制一个新的 shuffle，所以在我的 CardScreen.tsx 中我有这个：

export class CardScreen extends React.Component<NavProps, {}> {

  private cardService = new CardService();

  private mounted = false;
 
  // A lot of irrelevant stuff happens.

 readonly focusSubscription = this.props.navigation.addListener('focus', this.focusListener());

  focusListener() {
    let self = this as CardScreen;
    return function(payload: any): void {

    let updateState = false;
    let cardState = SpecialState.Card;

    if (( !self.cardService.active() || !self.context.running ) && ( self.card.id != self.FIRST_CARD_ID )) {
      self.card = self.cardService.firstCard();
      updateState = true;
      self.context.running = true;
    }
    if ( self.mounted && updateState ) {
          self.setState({ cardState: cardState.toString() });
    }
      
  }

  render(): JSX.Element {
     return ( <Text>{this.card.title}</Text>
              <Text>{this.card.text}</Text>);
  }
}

使用调试器进行跟踪，当 shuffle 运行时，这里的一切都按预期工作（将 context.running 属性设置为 false 作为在屏幕之间传递数据的最简单方法）focusListener 是触发，当前卡被更新。当我在 render 上放置断点时，我可以看到 this.card 包含在 focusListener 调用中设置的正确卡片。

但模拟器屏幕仍然显示旧卡。

如果我点击屏幕上的任何地方，它会立即更新为正确的屏幕，但不会自动刷新。我需要做什么才能在调用 render() 后立即显示呈现的视图？

导航回时如何刷新 React Native 中的缓存屏幕

0 个答案: