Question

我在底部标签导航器中有自定义的tabBarButtonComponent <AddButton/>。当用户点击此按钮时，将根据当前选择的选项卡打开新屏幕。所以我想知道当前哪个屏幕打开。

const ContentNavigator = createBottomTabNavigator(
  {
    Photo: {
      screen: Photo,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <BottomIcon name="photo" color={tintColor}/>
        )
      })
    },
    Audio: {
      screen: Audio,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <BottomIcon name="audio" color={tintColor}/>
        )
      })
    },
    Adding: {
      screen: () => null,
      navigationOptions: ({navigation}) => ({
        tabBarButtonComponent: () => (
          <AddButton navigation={navigation}/>
        )
      })
    },
    Video: {
      screen: Video,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <BottomIcon name="video" color={tintColor}/>
        )
      })
    },
    Text: {
      screen: Text,
      navigationOptions: () => ({
        tabBarIcon: ({tintColor}) => (
          <BottomIcon name="text" color={tintColor}/>
        )
      })
    }
  }, {
    headerMode: 'none',
    tabBarOptions: {
      showLabel: false,
      activeTintColor: '#fff',
      inactiveTintColor: '#000',
    }
  }
)

我试图将导航道具传递给<AddButton/>，导航routeName给出了“正在添加”。单击自定义按钮后，如何获取当前标签页名称？

Answer 1

您可以找到当前正在运行的屏幕

 this.props.navigation.state.params.routeName

您将拥有当前的标签。如果需要获取lastScreen，则必须像在参数<AddButton\>中一样传递它，例如：

<Button onPress={()=>this.props.navigation.navigate('tabName',{lastScreen: this.props.navigation.state.params.routeName})}

当您需要向后导航时，它变为：

this.props.navigation.navigate(this.props.navigation.state.params.lastScreen)

Answer 2

我认为对于这种特定的导航用法，您可以使用redux来保存当前标签页名称。所以在AddButton组件中您可以访问以前的标签页名称并根据您的业务采取操作。

如何获得当前或以前的路线？

2 个答案: