时间戳

首页 > 解决方案 > 如何从 react-navigation 标头调用函数？

reactjs - 如何从 react-navigation 标头调用函数？

问题描述

我实际上正在使用反应导航https://reactnavigation.org/，我有一个带有方法的组件：

class Sing extends Component {
   singASong = () => {
     console.log('hello i am singing');
   }
}

该组件将使用react-navigation和自定义标头呈现，问题是：如何singASong从自定义标头调用方法？：

const routeStackNavigation = {
  SingingMode: {
    screen: Sing,
    navigationOptions: ({ navigation }) => ({
      header: (
        <CustomNav onPressAction={() =>{
                 // how to call the method singASong from here ?
                }
              }
        />
      ),
    }),
  },
};

更新

我用这个设置和测试值：

  this.props.navigation.setParams({'onPress': 'akumen' });
    setTimeout(() => {
      console.log(this.props.navigation.getParam('onPress')); // akumen
    }, 2000);

我用以下方法测试值：

      onPress={() =>{
        console.log('NAVIGATION',navigation);
        console.log('ON PRESS',navigation.getParam('onPress'));
        console.log('PARAMS',navigation.state.params);
        return navigation.getParam('onPress');
        }
      }

但未定义

未定义的值

堆栈导航

下面我与我的真实世界示例分享图片，它是一个堆栈导航，我之前没有注意到，但它只是设置在正确的堆栈下，所以以此作为探索的动力：

堆栈导航

标签： reactjsreact-nativereact-navigation

解决方案

您可以使用导航参数：

在 componentDidMount

this.props.navigation.setParams({onPressAction: ()=>this.singASong()})

在导航选项中

<CustomNav onPressAction={navigation.getParam("onPressAction") }/>

推荐阅读