Question

我正在寻找一种将反应导航的headerLeft和headerRight按钮与应该在其上显示的屏幕/组件连接的方式，而无需使用该组件的prop /状态。

我们将所有导航转换都移到了一项服务（起初是因为我们需要它在react-components之外，但是决定在全应用范围内替换它，以保持一致的流程）。

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

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

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

之前，传递了组件状态的导航对象，这将触发状态更改（可以从组件完成并推回完成/取消），并使用componentWillReceiveProps（现在不推荐使用）更新屏幕。但是现在这种连接已经消失了，我们正在寻找连接两者的方法...

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

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

但是我看不到这样做的方法。我想到的另一种可能的解决方案是将组件中的侦听器附加到服务：通知何时更改了某个属性。

有没有一种方法可以在组件本身中创建可以访问状态的按钮？

有人知道吗？或者，如果您还有其他问题或其他方法，请分享！

反应导航：与组件/屏幕连接，无道具/状态

0 个答案: