reactjs - react-navigation：在没有道具/状态的情况下连接组件/屏幕

Question

我正在寻找一种方法将 react-navigation 的 headerLeft 和 headerRight 按钮与它应该显示的屏幕/组件连接起来，而不使用该组件的道具/状态。

我们将所有导航转换转移到一个单一的服务（起初是因为我们需要它在我们的反应组件之外，但决定在应用程序范围内替换它以保持一个一致的流程）。

现在，除了这个服务，我们还有几个标题按钮，其中两个需要与屏幕交互：取消/完成和编辑按钮......理想情况下，它们应该有一个可以在组件中提供的简单回调。

正如文档中所建议的，这是我们用作服务的一个类：

import {StackActions, NavigationActions} from 'react-navigation';
import type {NavigationRoute, NavigationParams} from 'react-navigation';

let _navigator;

function setNavigator(navigatorRef) {
  _navigator = navigatorRef;
}

function navigate(routeName: string, params?: NavigationParams) {
  _navigator.dispatch(NavigationActions.navigate({routeName, params}));
}

function reset(routeName: string, params?: NavigationParams) {
  //...
}

function getCurrentRoute(): NavigationRoute | undefined {
  //...
}

function goBack() {
  _navigator._navigation.goBack();
}

function getCurrentParams() {
  return _navigator.state.params || {};
}

function setParams(params) {
  _navigator._navigation.setParams(params);
}

export default {
  //all functions
};

这是我们拥有的按钮：

FinishCancelButton = () => (
  <Button onPress={() => NavigationService.getCurrentParams().canFinish ? NavigationService.setParams({finish: true}) : NavigationService.setParams({cancel: true})}>
    <Text>
      {NavigationService.getCurrentParams().canFinish ? 'finish' : 'cancel'}
    </Text>
  </Button>
),

之前，传递了组件状态的导航对象，这将触发状态更改（来自组件的 canFinish 和推回完成/取消）并使用componentWillReceiveProps（现在已弃用）更新屏幕。但是现在这种联系已经消失了，我们正在寻找将两者联系起来的方法......

理想情况下，这将是一个简单的回调：

FinishCancelButton = (onFinish) => (<Button onPress={onFinish} ... />)

但我看不出有办法做到这一点。我想到的另一种可能的解决方案是将组件中的侦听器附加到服务：它会在某个属性发生更改时发出通知。

有没有办法在组件本身中创建按钮，可以访问状态？

有人有什么主意吗？或者如果您还有其他问题或其他方法，请分享！

标签： reactjsreact-nativereact-navigationnavigationbarreact-props