从选项卡导航获取路线名称

Question

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


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

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

  render(){
    return(
)}

但是我得到这个错误：

TypeError:undefined 不是一个对象（评估'_this.props.navigation.state.routeName'

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

更新

我这样做了：

    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, 0, 122, 0.91)'}}
          screenOptions={({route}) => {
            if (route.name === 'Home') {
            
            Alert.alert(route.name);

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

我发出警报以查看路线名称，但它什么也没给我。我想这就是困扰我的原因。

现在刚好有:

export default 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, 0, 122, 0.91)'}}
          screenOptions={({route}) => {
            if (route.name === 'Home') {
              BackHandler.addEventListener(
                'hardwareBackPress',
                this.onBackClicked,
              );
            } else {
              BackHandler.removeEventListener(
                'hardwareBackPress',
                this.onBackClicked,
              );
            }
          }}>

        <Tab.Screen name="Home" component={Home} options={{tabBarIcon: ({ tintColor }) => (
            <Icon name="home" size={30} color="rgb(253, 234, 223)" />
          ),}}/>    
     )
  }
}

Answer 1

你可以这样做：

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, 0, 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',
              this.onBackClicked,
            );
          }
        }}>
        <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>
    );
  }
}

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

从选项卡导航获取路线名称

Getting route name from tab navigation

tabnavigator

react-native

react-navigation