1

我的问题是我想从 BountyDetailsS​​creen 导航到 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>
);
}

BountyDetailsS​​creen.js

在 BountyDetailsS​​creen 中，我显示详细信息，并希望在按下按钮时将 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();
}
4

2 回答 2

2

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

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

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

以下是你如何使用它：

const { navigateBack } = this.props;

navigateBack();
于 2017-05-06T22:34:10.443 回答
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 组件的示例。

于 2017-05-07T00:33:24.580 回答