反应 Native/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 是动作创作者。您需要将其映射到 props 并从 redeemClick 函数中的 props 读取它。只执行导入的 action creator 不会做任何事情，因为它没有连接到 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 组件的更多示例 here。

反应 Native/Shoutem：navigateBack() 不工作

React Native/Shoutem: navigateBack() not working

react-native

shoutem

react-native-navigation