React-navigation Tab Navigator - 检测标签何时离开屏幕

Question

我正在开发具有 3 个选项卡的 React Native 应用程序。因为我要在其中一个中显示摄像头画面，所以我需要知道它何时离开屏幕才能停止。由于在这种情况下未调用 componentWillUnmount 和 componentDidUnmount，因此我尝试使用 tabBarOnPress。但是，如果我在例如Tab1 屏幕，我只能检测到第一个 Tab 屏幕上的点击。所以我能够检测到屏幕何时获得焦点，但我无法检测到它何时失去焦点。我怎样才能做到这一点？

这是我已经尝试过的：

export const MyApp = TabNavigator({
  First: {
    screen: FirstTab
  },
  Second: {
    screen: SecondTab
  },
  Third: {
    screen: ThirdTab
  }},
  {
    tabBarPosition: 'bottom',
    swipeEnabled: false,
    backBehavior: 'none',
    animationEnabled: true,
    lazy: true,
    tabBarOptions: {
      activeTintColor: 'blue',
      inactiveTintColor: 'black',
      style: {
        backgroundColor: 'white'
      },
      indicatorStyle: {
        backgroundColor: 'white'
      }
    },
    navigationOptions: ({ navigation }) => ({
            tabBarOnPress: (scene, jumpToIndex) => {
                if (typeof navigation.state.params.updateState!=="undefined"){
                      navigation.state.params.updateState();
                    }
            },
        }),
  }
);


export default class First extends Component {

  constructor(props) {
    super(props);
  }

  componentDidMount() {
    this.props.navigation.setParams({
      updateState: this.updateState
    })
  }

  updateState=()=>{
    Alert.alert('state updated')
  }

}

不幸的是，这仍然仅在触摸第一个选项卡时调用 updateState()。触摸其他选项卡时出现此错误：

Answer 1

尝试使用componentWillBlur()生命周期方法。

很少有可能对您有帮助的生命周期方法

componentWillFocus - After componentDidMount and Before the screen starts animating
componentDidFocus - After screen is animated
componentWillBlur - Before screen animates out
componentDidBlur - After screen animates out

或

componentDidMount() {
    this.props.navigation.addListener('focus', this._onFocus);
    this.props.navigation.addListener('blur', this._onBlur);
  }

  componentWillUnmount() {
    this.props.navigation.removeListener('blur', this._onBlur);
    this.props.navigation.removeListener('focus', this._onFocus);
  }


  _onFocus = () => {
    // Update focus state. Latter state update is to refresh the content once
    // focus state is updated. Temp fix for react navigation tab swiping issues.
    // See https://github.com/react-community/react-navigation/issues/1257
    this.setState({isFocused: true}, () => { this.setState(this.state)});
  };

  _onBlur = () => {
    this.setState({isFocused: false});
  };

Refer here

React-navigation Tab Navigator - 检测标签何时离开屏幕

React-navigation's TabNavigator - detect when tab is going out of the screen

reactjs

react-native

react-navigation