当前位置 : 主页 > 网页制作 > React >

react-native – 如何从react-navigation Header调用Screen / Component类方法

来源:互联网 收集:自由互联 发布时间:2021-06-15
我需要从React Navigation Header调用SearchScreen类方法. 导航器看起来像这样: Search: { screen: SearchScreen, path: 'search/:query', navigationOptions: { title: 'Search', header: { right: ( MaterialCommunityIcons name="filt
我需要从React Navigation Header调用SearchScreen类方法.

导航器看起来像这样:

Search: {
    screen: SearchScreen,
    path: 'search/:query',
    navigationOptions: {
      title: 'Search',
      header: {
        right: (
          <MaterialCommunityIcons
            name="filter"
            onPress={() => {
              console.log(this);
            }}
            style={{marginRight: 15, color: 'white'}}
            size={24}
          />
        ),
      },
    }
  }
我做了以下工作:

// declare static navigationOptions in the Component
static navigationOptions = {
  title: 'Title',
  header: ({ state }) => ({
    right: (
      <MaterialCommunityIcons
        name="filter"
        onPress={state.params.handleFilterPress}
        style={{marginRight: 15, color: 'white'}}
        size={24}
      />
    ),
  }),
}

_handleFilterPress() {
  // do something
}


componentDidMount() {
  // set handler method with setParams
  this.props.navigation.setParams({ 
    handleFilterPress: this._handleFilterPress.bind(this) 
  });
}
网友评论