react-navigation 导航右侧添加事件

好多鱼鱼�

于 2021-03-24 16:01:16 发布

阅读量220

点赞数

文章标签： React Navigation 导航栏事件处理组件点击事件

本文链接：https://blog.csdn.net/weixin_44343419/article/details/115179448

版权

这篇博客介绍了如何在React Navigation中为导航栏右侧按钮添加点击事件。通过设置`headerRight`属性，创建了一个名为`HeaderRight`的组件，并在其中定义了`singleEvent`事件处理函数，当点击‘完成’按钮时，调用`navigatePress`方法，从而在Component页面中打印出'事件'。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

#react-navigation 导航右侧添加事件

#导航设置

import Component from './Component'
<Stack.Screen 
  name="Component"
  component={Component}
  options={({ navigation, route }:any) => ({
	  title: route.params.title,
	  headerLeft:() => {
	      return(<GoBack navigation={navigation} />)
	  },
	  headerRight:() => {
	        return( <HeaderRight singleEvent={()=>{ route.params.navigatePress() }} text="完成"  /> )
	  }
  })}
/>

#Component 页面设置

componentDidMount(){
	this.props.navigation.setParams({
        navigatePress: this.navigatePress
     })
}

navigatePress = () => {
	console.log('事件')
}