响应本机/Shoutem: navigateBack()不能工作

Question

我的问题是，我希望navigateBack()从BountyDetailsScreen到LoyaltyScreen，但是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>
);
}

BountyDetailsScreen.js

在BountyDetailsScreen中，我显示详细的信息，并希望在我按下按钮时将navigateBack()显示到忠诚屏幕上。

<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

navigateBack是一个动作创建者。您需要将它映射到道具，并从redeemClick函数中的道具中读取它。仅仅执行导入的操作创建者不会做任何事情，因为它没有连接到Redux。

下面是一个将其映射到道具的示例：

export default connect(mapStateToProps, { navigateBack })(SomeScreen));

下面是你如何使用它：

const { navigateBack } = this.props;

navigateBack();

Answer 2

我看得出来，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组件这里的更多示例。