反应本地处理复杂的后纽扣功能

Question

我想知道推荐的方式（如果有的话）来处理与Android平台打交道时的反应按钮。

我知道我每个屏幕可以注册听众，但是由于导航的工作方式，因此在导航时没有清晰的绑定或解开事件听众的流动。

到目前为止，我有两个想法。

1）我可以注册一个单个侦听器，并使用处理程序根据我的Redux商店做出决定。这意味着，如果我有一个屏幕，我有一个弹出窗口，我想用"后退"按钮关闭，我必须将其暴露于商店。从本质上讲，我希望受到后退按钮影响的任何内容都必须连接到商店。混乱

2）我每个屏幕可以注册一个侦听器。从我之前说的话来看，没有可靠的生命周期挂钩可以处理此操作，因此必须在我的末尾手动，即我应该始终知道哪些操作会导航到新屏幕上，并在导航之前在特定的屏幕上解开侦听器。

解决问题的一半。当导航回到屏幕时，应该重新定位它是听众。不确定该怎么做，除了与componentWillRecieveProps和其他杂物混在一起。仍然看起来很混乱。

Answer 1

react-navigation无需任何工作就可以为您处理基本的后背功能。

如果您想要一些自定义处理，则可以尝试React-Navigation-Addons库，它将为您提供2个事件来收听：focus和blur，因此您可以在这些事件发生时注册/Unregister Back Butace侦听器。

这是策略2）从您的问题中，您可以使用它而不是缺少生命周期挂钩。但是，请注意此库是一个实验，因此请在使用之前阅读注释。看起来像这样：

class Screen extends Component {
    handleBack = () => {
    ...
    }
    screenFocus = () => {
        // add back button listener or any other code you want to execute on screen focus
        BackHandler.addEventListener('hardwareBackPress', this.handleBack);
    }
    screenBlur = () => {
        // remove back button listener or add any other code you want to execute on screen blur
        BackHandler.removeEventListener('hardwareBackPress', this.handleBack);
    }
    componentDidMount() {
        this.props.navigation.addListener('focus', this.screenFocus);
        this.props.navigation.addListener('blur', this.screenBlur);
    }
    componentWillUnmount() {
        this.props.navigation.removeListener('focus', this.screenFocus);
        this.props.navigation.removeListener('blur', this.screenBlur);
    }
    ...
}

Answer 2

react-native具有用于处理Android和AppleTV上的硬件背部操作的API。您将eventlistender添加到后式手动组件中。文档

如果您使用的是react-navigation，则可以将此事件侦听器放在呈现堆栈的组件中。然后，您可以在与导航状态相对应的堆栈中找到屏幕并致电左键。这是一个粗略的例子 -

const _RootContainer = (props) => {
  const navigation = addNavigationHelpers({
    dispatch: props.dispatch,
    state: props.nav,
  })
  BackHandler.addEventListener('hardwareBackPress', function() {
  const route = navigation.state.routes[navigation.state.index]
  const screen = stack[route].screen
  const navOptions = screen.navigationOptions({navigation})
      if (navOptions.headerLeft) {
    navOptions.headerLeft.props.onPress()
  }
      return true;
  });
  return (<View style={{ flex: 1 }}>
    <AppNavigator
      navigation={navigation}
    />
  </View>
)}