【问题标题】:How show backButton when we navigate for tabs?当我们导航标签时如何显示 backButton?
【发布时间】:2018-04-17 14:17:21
【问题描述】:

我正在 ReactNative 中开发一个带有 3 个选项卡的应用程序,其中一个选项卡的嵌套选项卡不可见。我使用 react-native-router-flux 来做到这一点。我有 2 个问题:

  1. 当我尝试输入第一个具有嵌套选项卡的选项卡的名称时,我只能看到父选项卡的名称(附图)。

  2. 当我在嵌套选项卡之间导航时,是否可以隐藏/显示后退按钮?

我的 Router.js

<Router sceneStyle={ styles.router } backAndroidHandler={ onBackAndroid } hideNavBar>
  <Scene key="root">
     <Scene
          key="customer"
          title={ "APPNAME" }
          // type={ 'reset' }
          headerMode='none'
          tabBarPosition='top'
          tabs
          hideNavBar={false}
          wrap={false}
          showLabel
          // swipeEnabled={ true }
          // lazy={ true }
          tabBarStyle={ styles.tabBarStyle }
          titleStyle={ styles.titleStyle }
          navigationBarStyle={ styles.navigationBarStyle }
          backButtonTintColor={'#FFF'}
          renderRightButton={ renderNavBarRightMenu }
        >
          <Scene key="customerHome">
            <Scene key="scanQR" component={ HomeCustomerContainer } />
            <Scene key="vehicleDetail" component={ OrdersContainer } />
          </Scene>
          <Scene key="customerOrders" component={ ProfileContainer } hideNavBar/>
          <Scene key="customerProfile" component={ ProfileContainer } hideNavBar/>
        </Scene>

      </Scene>
    </Router>

当用户在路由器中从 scanQR 转到 vehicleDetail 时,后退按钮不会出现。我需要这种行为,因为用户可以随时返回。

行为必须是:用户按下浮动按钮,打开相机并扫描条形码。然后,当读取条形码时,他们会从服务器获取信息并将其显示在新场景中,但不会出现后退按钮。

我的代码有什么问题?

谢谢!!

图片 更新: 我找到了标题问题的解决方案:

作为 Tabs 直接子级的场景,可以使用列出的所有道具 上面在场景中,

https://github.com/aksonov/react-native-router-flux/blob/master/docs/API.md#tab-scene-child-scene-within-tabs

当我打开另一个场景时,我仍然有显示后退按钮的问题:(

【问题讨论】:

  • 按下navigate.back()创建一个按钮

标签: react-native react-native-android react-native-ios react-native-router-flux


【解决方案1】:

这应该可行:

onBackFunction()
{
  console.log("backkkkkkkkkk")
  Actions.sceneA()
}


<Scene key="root" >
          <Scene  key="sceneA" component={SceneA} />
          <Scene  key="sceneB" onBack={this.onBackFunction()} component={SceneB} />
</Scene>

【讨论】:

  • 感谢@Android 团队的回复,但我想隐藏父场景(“客户”)上的后退按钮,并在导航到“vehicleDetail”时显示。
猜你喜欢
  • 2020-10-01
  • 1970-01-01
  • 1970-01-01
  • 2016-04-30
  • 1970-01-01
  • 2021-01-11
  • 2015-08-26
  • 2021-08-07
  • 2017-03-16
相关资源
最近更新 更多