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

Posted 2023-02-23

【中文标题】React Native / Shoutem：navigateBack（）不起作用

【英文标题】：React Native/Shoutem: navigateBack() not working

【发布时间】：2017-05-06 21:14:52

【问题描述】：

我的问题是我想从 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 中，我显示详细信息，并希望在按下按钮时导航Back() 到忠诚度屏幕。

<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();

【参考方案1】：

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

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

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

这是你如何使用它：

const  navigateBack  = this.props;

navigateBack();

【讨论】：

谢谢！我忘了从 props 中读取 navigateBack() 函数

【参考方案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 找到更多示例。