从标签导航获取路线名称

问题描述

我想获取当前路由的名称，以仅在“主页”屏幕（下方）中禁用硬件后退按钮。所以我想获得当前屏幕的名称。如果是“主页”，则禁用硬件后退按钮。如果没有，则什么也不做。

jdk1.8.0_212

但是我得到这个错误：

TypeError：未定义不是一个对象（正在评估'_this.props.navigation.state.routeName'

该如何解决？如果你们有阻止后退按钮的建议，我会接受。

更新

我这样做了

componentwillMount = () => {
    var currentScreen = this.props.navigation.state.routeName;

    if(currentScreen === 'Home'){
        BackHandler.addEventListener('hardwareBackPress',() => true);
    }
  }

  render(){
    return(
)}

我放了一个警报以查看路线名称，但没有给我带来任何好处。我想那是困扰我的地方。

现在我已经拥有了：

    constructor(props) {
      super(props);
      this.onBackClicked = this._onBackClicked.bind(this);
    }
  
    componentwillUnmount() {
      BackHandler.removeEventListener('hardwareBackPress',this.onBackClicked);
    }
  
    _onBackClicked = () => {
      return true;
    };
  
    render() {
      return (
        <Tab.Navigator barStyle={{ backgroundColor: 'rgba(8,122,0.91)'}}
          screenoptions={({route}) => {
            if (route.name === 'Home') {
            
            Alert.alert(route.name);

              BackHandler.addEventListener(
                'hardwareBackPress',this.onBackClicked,);
            } else {
              BackHandler.removeEventListener(
                'hardwareBackPress',);
            }
          }}>

解决方法

您可以执行以下操作：

class TabNavigator extends Component {
  constructor(props) {
    super(props);
    this.onBackClicked = this._onBackClicked.bind(this);
  }

  componentWillUnmount() {
    BackHandler.removeEventListener('hardwareBackPress',this.onBackClicked);
  }

  _onBackClicked = () => {
    return true;
  };

  render() {
    return (
      <Tab.Navigator
        barStyle={{backgroundColor: 'rgba(8,122,0.91)'}}
        screenOptions={({navigation,route}) => {
          if (route.name === 'Home' && navigation.isFocused()) {
            BackHandler.addEventListener(
              'hardwareBackPress',this.onBackClicked,);
          } else if (route.name !== 'Home' && navigation.isFocused()) {
            BackHandler.removeEventListener(
              'hardwareBackPress',);
          }
        }}>
        <Tab.Screen
          name="Home"
          component={Home}
          options={{
            tabBarIcon: ({tintColor}) => (
              <Icon name="home" size={30} color="rgb(253,234,223)" />
            ),}}
        />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    );
  }
}

我使用路线道具获取当前名称，并使用navigation.isFocused()检查当前路线名称是否为“家”。如果是这种情况，我添加了禁用硬件后退按钮的事件。如果路由名称不是本地名称，但是它是针对性的，则删除事件侦听器。最后，我在卸载组件时删除了事件侦听器，以防止内存泄漏。