Question

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

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, 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,
              );
            }
          }}>

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>
    );
  }
}

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

从标签导航获取路线名称

1 个答案: