反应本机/ Shoutem：navigateBack（）不工作

Question

我的问题是，我想从BountyDetailsS​​creen navigateBack（）到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(); 
} 

Answer 1

navigateBack是动作创建者。您需要将其映射到道具上，并从您的redeemClick功能中的道具中读取。只需执行导入的动作创建器，它将不会执行任何操作，因为它没有连接到Redux。

这里有一个例子，你把它映射到道具：

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

这里是你如何使用它：

const { navigateBack } = this.props; 

navigateBack(); 

Answer 2

我可以看到airmiha的答案就是你要找的东西，但我只是想添加到它。

您还可以使用hasHistory来设置您的@shoutem/uiNavigationBar（如果您正在使用它），并带有一个使用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中找到更多示例。