简体   繁体   English

是否可以在React Navigation的navigationOptions中访问非静态方法?

[英]Is it possible to access non static methods in React Navigation's navigationOptions?

In my form I need to have a submit button to the right of the header that calls the same method as the submit button at the bottom of the form. 在我的表单中,我需要在标题的右侧有一个提交按钮,该按钮调用与表单底部的提交按钮相同的方法。

React Navigation requires you to declare a static method called navigationOptions to pass the navigator for each screen your options. React Navigation要求您声明一个称为navigationOptions的静态方法,以将选项的每个屏幕的导航器传递给导航器。

problem with that is that I need to access the onFormSubmit() function from both of my buttons, and obviously you can't access this in static methods. 这样做的问题是,我需要从两个按钮都访问onFormSubmit()函数,并且显然您无法在静态方法中访问this

Is there any way that I can work around this somehow? 有什么办法可以解决这个问题吗? I tried making a button outside of the navigation header myself to make it have a position of absolute but I can't manage to make it go over the header. 我尝试自己在导航标题的外部制作一个按钮,以使其具有绝对位置,但我无法设法使其超出标题。

export default class EnterBookDetailsScreen extends Component {
  static navigationOptions = ({ navigation }) => ({
    headerRight: (
      <Button
        text="submit"
        primary
        raised
        style={{ container: { margin: 10 } }}
        // Is this possible?
        onPress={() => this.onFormSubmit()}
      />
    ),
  })

onFormSubmit() {
.
.
.

Here's a screenshot of what I have so that the problem makes more sense(the submit button in question is the one at the top right): 这是我所拥有的屏幕截图,这样问题就更有意义了(有问题的提交按钮位于右上角): 在此处输入图片说明

static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;

  return {
    headerRight: (
      <Button
        text="submit"
        primary
        raised
        style={{ container: { margin: 10 } }}
        onPress={() => params.onFormSubmit()}
      />
    ),
  }
}

componentDidMount() {
  const { navigation } = this.props;

  navigation.setParams({
    onFormSubmit: this.onFormSubmit,
  });
}

onFormSubmit = () => {
  ...
}

I'm using version 1.0.0-beta.11 我正在使用1.0.0-beta.11版本

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React Navigation:'navigation.state.params' 在'static navigationOptions' 中始终未定义 - React Navigation: 'navigation.state.params' is always undefined in 'static navigationOptions' 如何在 react-navigation navigationOptions 上设置功能? - How set function on react-navigation navigationOptions? 如何在React中通过HOC传递静态NavigationOptions? - How to pass static navigationOptions with HOC in React? React Native 在 static navigationOptions 中使用 this.props - React Native use this.props in static navigationOptions react-navigation:如何在多个屏幕中包装navigationOptions - react-navigation: How to wrap navigationOptions in multiple screens 对其他屏幕方法反应导航访问 - React Navigation access to other screen methods React Native + React I18next + React Navigation,navigationOptions更新问题 - React Native + React I18next + React Navigation, navigationOptions update issue 在 Typescript 中访问对象的类的 static 方法? - Access a object's class's static methods in Typescript? react-native和react-navigation无法将参数作为参数传递给NavigationOptions中的下一个屏幕 - react-native and react-navigation Unable to pass a function as a param to the next screen in NavigationOptions 是否可以在ES6中的类的静态方法中访问变量和函数? - Is it possible to access variables and functions inside static methods of class in ES6?
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM