React Native之react-navigation动态修改标题、页面导航等

最新推荐文章于 2024-09-10 05:36:05 发布

mayundoyouknow

最新推荐文章于 2024-09-10 05:36:05 发布

阅读量5.3k

点赞数

分类专栏： React Native 文章标签： react-navigation 动态修改标题标题剧中

本文链接：https://blog.csdn.net/ahou2468/article/details/92421745

版权

本文详细介绍了如何在React Native中利用react-navigation动态修改标题、左右显示组件以及监听点击事件，并提供了相关代码示例，包括动态设置标题、标题居中以及通过params传递数据。

摘要由CSDN通过智能技术生成

1.1在当前Component获取navigation导航对象

1.4navigation的state属性

2.动态修改标题-title或者左右显示组件-headerRight

2.1动态修改标题

2.2动态修改左右显示组件-headerRight

2.3动态监听右侧组件点击事件

2.4动态设置标题剧中

1.1在当前Component获取navigation导航对象

const {state,params,navigate}=this.props.navigation;

1.2navigate方法

navigate方法参数，navigateTo：具体进入页面，params：传递给下一个页面具体参数，action：动作

1.2.2使用示例

const {navigate} = this.props.navigation; //获取navigation的navigate方法
navigate(
'InspectionAndMaintenanceScene', //必填，具体进入的下一个页面
{user:'111'}, //下一个界面接收的参数
//(advanced) The sub-action to run in the child router, if the screen is a navigator. Any one of the //actions described in this doc can be set as a sub-action.
//（高级）如果屏幕是导航器，要在子路由器中运行的子操作。此文档中描述的任何操作都可以设置为子操作。
NavigationActions.navigate({ routeName: 'WriteConfigInfoScene' }) //通常不需要配置

);

1.2.3源码

navigate: (navigateTo, params, action) => {
      if (typeof navigateTo === 'string') {
        return navigation.dispatch(
          NavigationActions.navigate({ routeName: navigateTo, params, action })
        );
      }
      invariant(
        typeof navigateTo === 'object',
        'Must navigateTo an object or a string'
      );
      invariant(
        params == null,
        'Params must not be provided to .navigate() when specifying an object'
      );
      invariant(