React Native / Shoutem：navigateBack（）不起作用

Question

我的问题是我想要从BountyDetailsS​​creen到LoyaltyScreen的navigationBack，但navigateBack（）函数调用不会触发任何操作。当我记录该功能时，它说：

我唯一注意到的是，navigationStack是空的。当我使用navigateTo函数执行相同操作时，它会工作，但是我有一个混乱的导航堆栈。

在我的LoyaltyScreen.js中，我正在显示一个ListView。它是RN ListView（不是从shoutem导入的）。

LoyaltyScreen.js

renderRow(bounty) {
  return (
    <ListBountiesView
      key={bounty.id}
      bounty={bounty}
      onDetailPress={this.openDetailsScreen}
      redeemBounty={this.redeemBounty}
    />
  );
}

ListBountiesView.js

ListBountiesView呈现每个ListView行，并在单击行时打开详细信息屏幕。

render() {
const { bounty } = this.props;

return (      
  <TouchableOpacity onPress={this.onDetailPress}>          
    {bounty.type == 0 ? this.renderInShopBounty() : this.renderContestBounty()}
    <Divider styleName="line" />
  </TouchableOpacity>
);
}

BountyDetailsS​​creen.js

在BountyDetailsS​​creen中，我显示详细信息，并希望在按下按钮时将导航（）导航到忠诚度屏幕。

<Button styleName="full-width" onPress={() => this.onRedeemClick()}>
  <Icon name="add-to-cart" />
  <Text>Einlösen</Text>
</Button>

onRedeemClick() {
  const { bounty, onRedeemPress } = this.props;
  onRedeemPress(bounty);
  navigateBack();
}

Answer 1

我可以看到airmiha的回答是你正在寻找的，但我只是想加入它。

您还可以使用hasHistory设置@shoutem/ui NavigationBar（如果您正在使用它），并使用一个简单的后退按钮，该按钮使用navigateBack（）。

<NavigationBar
  styleName="no-border"
  hasHistory
  title="The Orange Tabbies"
  share={{
    link: 'http://the-orange-tabbies.org',
    text: 'I was underwhelmed by The Orange Tabbies, but then I looked at that 
          sweet, sweet back button on the Nav Bar. 
          #MakeNavBarsGreatAgain',
    title: 'Nevermind the cats, check the Nav Bar!',
  }}
/>

您可以使用NavigationBar组件here找到更多示例。