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

目录

 

1.navigation导航对象相关参数

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

1.2navigate方法

1.2.2使用示例

1.2.3源码

1.3params

1.4navigation的state属性

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

2.1动态修改标题

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

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

2.4动态设置标题剧中

---

1.navigation导航对象相关参数

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(