如何使用React Native Router在root用户显示后退按钮？

Question

我正在使用#BackToBasics : Dating Responsibly - Aaron Bertrand并希望在导航根目录的组件上设置一个后退按钮并覆盖其操作。

是否可以启用后退按钮而无需使用renderBackButton编写自己的按钮？我宁愿使用随库提供的那个来确保其他屏幕之间的一致性，并避免编写新组件。

我尝试使用hideBackImage={false}，但它似乎无效。

Answer 1

你做不到。由于您位于应用程序的根目录中，因此堆栈中只有一个场景。

但为什么要在第一个应用程序屏幕上显示后退按钮？这毫无意义......

但是，使用自定义操作渲染后退按钮非常容易。例如：

<Scene key='root'
    ...    
    renderLeftButton={this.renderCustomButton()}
    ...
/>

用

renderCustomButton() {
  return () => (
    <TouchableOpacity>
      <Icon name="back" size={30} color="#900" />
    </TouchableOpacity>
  );
}

然后你只需添加你的动作或你想用onLeft prop

做什么

<Scene key='root'
    ...    
    renderLeftButton={this.renderCustomButton()}
    onLeft={**YOUR ACTION**}
    ...
/>

您也可以在TouchableOpacity onPress道具上添加它。

我通常使用react-native-vector-icons作为自定义导航栏图标https://github.com/oblador/react-native-vector-icons